/* ==============================================================
   AUconnection Service Catalogue, Customer Sign-in and Request UI
   Premium navy / cyan design with coordinated Light Mode support.
   Load this after the main public stylesheet.
============================================================== */

.service-catalogue-card { display:flex; flex-direction:column; }
.service-catalogue-card .service-detail-icon { flex:0 0 auto; }
.service-catalogue-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; padding-top:18px; }
.service-card-details,.service-card-request { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:.84rem; font-weight:800; transition:transform .2s ease,opacity .2s ease; }
.service-card-details { color:var(--cyan,#00c8e8); }
.service-card-request { padding:9px 12px; border:1px solid rgba(0,190,255,.35); border-radius:10px; color:#eaf7ff; background:linear-gradient(110deg,#087df3,#00bfdc); }
.service-card-details:hover,.service-card-request:hover { transform:translateY(-2px); }

.service-detail-page,.service-request-page,.customer-portal-page,.customer-portal-auth-page { color:var(--text-primary,#eef6ff); background:#050d1c; overflow:hidden; }
.service-detail-page .container,.service-request-page .container,.customer-portal-page .container { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.service-detail-hero,.service-request-hero,.customer-portal-welcome { position:relative; isolation:isolate; overflow:hidden; padding:88px 0 72px; background:radial-gradient(circle at 75% 20%,rgba(0,190,255,.16),transparent 38%),linear-gradient(130deg,#071a31,#061021 68%); border-bottom:1px solid rgba(0,190,255,.12); }
.service-detail-hero::before,.service-request-hero::before,.customer-portal-welcome::before { content:""; position:absolute; width:420px; height:420px; right:-120px; top:-260px; border:1px solid rgba(0,190,255,.18); border-radius:50%; box-shadow:0 0 0 35px rgba(0,190,255,.025),0 0 0 75px rgba(0,190,255,.02); z-index:-1; }
.service-detail-hero-content { max-width:850px; }
.service-back-link { display:inline-block; color:#67c8f2; text-decoration:none; font-weight:700; margin-bottom:25px; font-size:.88rem; }
.service-detail-hero h1,.service-request-hero h1,.customer-portal-welcome h1 { color:#f4f8ff; font-size:clamp(2.25rem,5vw,4.1rem); line-height:1.08; margin:16px 0; letter-spacing:-.04em; }
.service-detail-hero p,.service-request-hero p,.customer-portal-welcome p { color:#aec4dc; line-height:1.8; max-width:760px; }
.service-detail-hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:26px; }
.service-detail-hero-actions .btn-secondary { display:inline-flex; align-items:center; justify-content:center; padding:13px 19px; border:1px solid rgba(133,179,218,.28); border-radius:10px; color:#e3f1ff; text-decoration:none; font-weight:800; background:rgba(255,255,255,.035); }
.service-pricing-note { margin-top:22px; color:#9db7d1; font-size:.86rem; }
.service-pricing-note span { color:#04d4ed; margin-right:7px; }
.service-detail-overview,.service-detail-information,.service-process-section { padding:70px 0; background:#050d1c; }
.service-detail-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); gap:22px; }
.service-detail-main-card,.service-detail-side-card,.service-info-card,.service-process-step,.service-request-form,.service-request-sidebar,.customer-portal-panel,.customer-portal-stat-card,.customer-portal-auth-card { border:1px solid rgba(40,145,210,.25); background:linear-gradient(145deg,rgba(17,42,69,.94),rgba(8,22,40,.96)); border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.14); }
.service-detail-main-card,.service-detail-side-card,.service-info-card { padding:30px; }
.service-detail-main-card h2,.service-detail-side-card h3,.service-info-card h2,.service-process-cta h2 { color:#f2f7ff; margin:12px 0 14px; }
.service-detail-main-card p,.service-detail-side-card p,.service-info-card p { color:#a9c0d8; line-height:1.9; }
.service-detail-side-card { background:radial-gradient(circle at 90% 0,rgba(0,192,255,.14),transparent 45%),linear-gradient(145deg,#102b49,#08182c); }
.service-side-link { display:inline-block; margin-top:12px; color:#20d3f1; font-weight:800; text-decoration:none; }
.service-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.service-info-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; color:#16d7f2; background:rgba(0,190,255,.1); border:1px solid rgba(0,190,255,.25); font-weight:900; font-size:1.2rem; margin-bottom:17px; }
.service-info-card ul,.service-portal-auth-intro ul { list-style:none; padding:0; margin:20px 0 0; }
.service-info-card li { position:relative; padding:11px 0 11px 25px; color:#c6d8ea; border-bottom:1px solid rgba(142,183,220,.1); line-height:1.6; }
.service-info-card li::before { content:"✓"; position:absolute; left:0; color:#00c9e8; font-weight:900; }
.service-process-section { background:linear-gradient(180deg,#07162a,#050d1c); }
.service-process-section .section-heading { text-align:center; max-width:760px; margin:0 auto 32px; }
.service-process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.service-process-step { padding:23px; min-height:130px; }
.service-process-step span { color:#11d4f0; font-weight:900; letter-spacing:.08em; }
.service-process-step p { color:#d7e5f4; line-height:1.65; margin:14px 0 0; }
.service-process-cta { margin-top:34px; padding:34px; border:1px solid rgba(0,190,255,.25); border-radius:18px; text-align:center; background:radial-gradient(circle at 50% 0,rgba(0,190,255,.13),transparent 60%),#0a1b30; }
.service-process-cta p { color:#aac1d9; margin-bottom:22px; }

.service-request-hero { padding:65px 0 48px; }
.service-request-hero h1 { font-size:clamp(2rem,4vw,3.2rem); }
.service-request-content { padding:48px 0 85px; background:#050d1c; }
.service-request-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.75fr); gap:22px; align-items:start; }
.service-request-form,.service-request-sidebar { padding:30px; }
.service-request-form h2,.service-request-sidebar h2 { color:#f2f7ff; margin:10px 0 20px; }
.service-request-form label { display:block; margin:18px 0 8px; color:#dce9f6; font-size:.9rem; font-weight:800; }
.service-request-form input:not([type=checkbox]):not([type=file]),.service-request-form select,.service-request-form textarea,.customer-portal-form input { width:100%; min-height:48px; padding:12px 14px; border:1px solid #244763; border-radius:10px; color:#eaf4ff; background:#061629; outline:none; font:inherit; }
.service-request-form textarea { min-height:132px; resize:vertical; }
.service-request-form input:focus,.service-request-form select:focus,.service-request-form textarea:focus,.customer-portal-form input:focus { border-color:#00c8e8; box-shadow:0 0 0 3px rgba(0,190,255,.12); }
.service-request-form input[type=file] { width:100%; color:#a8c0d8; padding:10px 0; }
.service-request-grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.service-request-customer-summary { display:grid; gap:5px; padding:15px 17px; border:1px solid rgba(0,190,255,.18); border-radius:12px; background:rgba(0,190,255,.06); color:#ddecfa; }
.service-request-customer-summary span { color:#9db8d2; font-size:.85rem; }
.service-request-help { display:block; color:#8faac5; font-size:.8rem; line-height:1.65; margin-top:9px; }
.service-request-consent { display:flex!important; align-items:flex-start; gap:10px; line-height:1.5; }
.service-request-consent input { margin-top:4px; accent-color:#00bfe2; }
.service-request-consent span { color:#b7cbe0; font-weight:500!important; }
.service-request-submit,.customer-portal-submit { width:100%; border:0; border-radius:11px; min-height:52px; color:#fff; background:linear-gradient(105deg,#087df3,#00c4dc); font-weight:900; cursor:pointer; box-shadow:0 12px 28px rgba(0,137,235,.18); }
.service-request-sidebar { position:sticky; top:105px; background:radial-gradient(circle at 95% 0,rgba(0,190,255,.13),transparent 45%),linear-gradient(145deg,#102b49,#08182c); }
.service-request-sidebar p { color:#a9bfd6; line-height:1.75; }
.service-request-side-note { margin-top:25px; border-top:1px solid rgba(150,190,225,.15); padding-top:20px; }
.service-request-side-note strong { color:#edf6ff; }
.service-request-side-note ol { padding-left:20px; color:#b4c9dd; line-height:1.8; font-size:.88rem; }

.customer-portal-auth-page { min-height:65vh; padding:70px 0 90px; background:radial-gradient(circle at 20% 40%,rgba(0,150,255,.12),transparent 34%),#050d1c; }
.customer-portal-auth-wrap { width:min(1080px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:1fr minmax(350px,.9fr); gap:55px; align-items:center; }
.customer-portal-auth-intro h1 { color:#f3f8ff; font-size:clamp(2.5rem,5vw,4rem); line-height:1.08; margin:18px 0; }
.customer-portal-auth-intro h1 span { background:linear-gradient(90deg,#078df4,#00d0e3); color:transparent; background-clip:text; }
.customer-portal-auth-intro p { color:#afc5dc; line-height:1.8; }
.customer-portal-auth-intro li { color:#c8d9e9; margin:13px 0; padding-left:4px; }
.customer-portal-auth-card { padding:32px; }
.customer-portal-auth-card h2 { margin:12px 0; color:#f2f7ff; font-size:2rem; }
.customer-portal-auth-card>p { color:#aabfd5; line-height:1.7; }
.customer-portal-form { display:grid; gap:10px; margin-top:25px; }
.customer-portal-form label { color:#d9e7f6; font-weight:800; font-size:.88rem; margin-top:8px; }
.customer-portal-form input { margin-bottom:8px; }
.customer-portal-auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px; color:#9eb7d0; font-size:.86rem; }
.customer-portal-auth-links a { color:#18d1ee; font-weight:800; text-decoration:none; }
.customer-portal-security-note { margin-top:22px; padding:14px; border:1px solid rgba(0,190,255,.2); border-radius:11px; color:#95aec8!important; font-size:.8rem; }
.customer-portal-alert { padding:13px 15px; border:1px solid rgba(0,190,255,.25); border-radius:11px; color:#dceeff; background:rgba(0,150,220,.1); line-height:1.6; margin-bottom:18px; }
.customer-portal-alert-success { border-color:rgba(22,190,133,.45); background:rgba(13,150,105,.15); color:#baf5df; }
.customer-portal-alert-error { border-color:rgba(239,90,90,.45); background:rgba(180,45,45,.15); color:#ffd1d1; }

.customer-portal-welcome { padding:55px 0; }
.customer-portal-welcome-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.customer-portal-status { display:flex; align-items:center; gap:9px; border:1px solid rgba(0,190,255,.25); border-radius:99px; padding:10px 15px; color:#c6def3; background:rgba(0,190,255,.07); font-size:.85rem; font-weight:800; }
.customer-status-dot { width:8px; height:8px; border-radius:50%; background:#21d8a1; box-shadow:0 0 12px rgba(33,216,161,.5); }
.customer-portal-dashboard-section { padding:42px 0 85px; }
.customer-portal-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:22px; }
.customer-portal-stat-card { padding:20px; display:grid; gap:9px; }
.customer-portal-stat-card span { color:#a8bfd5; font-size:.85rem; }
.customer-portal-stat-card strong { color:#f4f8ff; font-size:2rem; }
.customer-portal-stat-card small { color:#8ca9c4; }
.customer-portal-content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.75fr); gap:20px; align-items:start; }
.customer-portal-panel { padding:25px; }
.customer-portal-panel h2 { color:#eff6ff; margin:9px 0 20px; }
.customer-portal-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.customer-portal-panel-heading h2 { margin-bottom:0; }
.customer-portal-panel-heading>a { color:#1bd0ed; font-size:.85rem; font-weight:800; text-decoration:none; }
.customer-request-list { display:grid; }
.customer-request-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:16px 2px; border-top:1px solid rgba(143,181,215,.13); text-decoration:none; }
.customer-request-row-main { display:grid; gap:6px; }
.customer-request-row-main strong { color:#eaf4ff; }
.customer-request-row-main small { color:#8ea9c3; }
.customer-request-status,.admin-service-status { display:inline-flex; align-items:center; border-radius:99px; padding:6px 10px; font-size:.72rem; font-weight:900; white-space:nowrap; color:#cdefff; border:1px solid rgba(0,180,230,.3); background:rgba(0,160,220,.1); }
.status-completed,.status-approved { color:#b8f2d8; border-color:rgba(25,190,130,.35); background:rgba(20,155,105,.12); }
.status-rejected,.status-cancelled { color:#ffd1d1; border-color:rgba(230,90,90,.35); background:rgba(170,50,50,.12); }
.status-in_progress,.status-under_review,.status-awaiting_customer { color:#d0e6ff; border-color:rgba(50,145,245,.35); background:rgba(20,105,210,.12); }
.customer-portal-empty { text-align:center; padding:45px 20px; }
.customer-portal-empty>span { display:inline-grid; place-items:center; width:55px; height:55px; border-radius:16px; color:#0ed2ee; border:1px solid rgba(0,190,255,.26); background:rgba(0,190,255,.09); font-size:1.5rem; }
.customer-portal-empty h3 { color:#edf6ff; }
.customer-portal-empty p,.customer-portal-muted { color:#9bb4ce; line-height:1.7; }
.customer-quick-action { display:flex; gap:12px; align-items:center; padding:14px 0; border-top:1px solid rgba(143,181,215,.13); text-decoration:none; }
.customer-quick-action>span:first-child { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#12d0ee; border:1px solid rgba(0,190,255,.2); background:rgba(0,190,255,.08); font-size:1.1rem; }
.customer-quick-action>span:last-child { display:grid; gap:4px; }
.customer-quick-action strong { color:#eaf4ff; }
.customer-quick-action small { color:#8faac4; }
.customer-portal-logout-form { margin-top:12px; }
.customer-portal-logout-form button { border:0; background:transparent; color:#8faac4; text-decoration:underline; cursor:pointer; padding:8px 0; }
.customer-request-detail-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr); gap:20px; align-items:start; }
.customer-request-requirements { white-space:normal; line-height:1.8; color:#bed1e3; }
.customer-request-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-top:20px; margin-top:20px; border-top:1px solid rgba(143,181,215,.13); }
.customer-request-meta-grid div { display:grid; gap:6px; }
.customer-request-meta-grid small,.customer-request-files span { color:#8faac4; }
.customer-request-meta-grid strong { color:#e8f3ff; font-size:.85rem; }
.customer-request-files { padding-left:18px; color:#bcd0e4; }
.customer-request-files a { color:#20d2ef; text-decoration:none; }
.customer-request-timeline { display:grid; gap:0; margin-top:18px; }
.customer-request-timeline article { display:grid; grid-template-columns:14px 1fr; gap:12px; padding-bottom:22px; }
.timeline-dot { width:10px; height:10px; margin-top:5px; border-radius:50%; background:#06cce9; box-shadow:0 0 12px rgba(0,200,235,.3); }
.customer-request-timeline strong { color:#edf5ff; }
.customer-request-timeline p { color:#adc3d9; line-height:1.65; }
.customer-request-timeline small { color:#819db7; }

@media (max-width:900px) {
    .service-detail-layout,.service-request-layout,.customer-portal-content-grid,.customer-request-detail-grid { grid-template-columns:1fr; }
    .service-request-sidebar { position:static; }
    .customer-portal-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .customer-portal-auth-wrap { grid-template-columns:1fr; gap:28px; max-width:620px; }
}
@media (max-width:620px) {
    .service-detail-page .container,.service-request-page .container,.customer-portal-page .container { width:calc(100% - 32px); }
    .service-detail-hero,.service-request-hero,.customer-portal-welcome { padding:58px 0 45px; }
    .service-detail-overview,.service-detail-information,.service-process-section { padding:48px 0; }
    .service-info-grid,.service-process-grid,.service-request-grid-two { grid-template-columns:1fr; }
    .service-detail-main-card,.service-detail-side-card,.service-info-card,.service-request-form,.service-request-sidebar,.customer-portal-panel,.customer-portal-auth-card { padding:22px; }
    .service-detail-hero-actions { flex-direction:column; }
    .service-detail-hero-actions .btn { width:100%; justify-content:center; }
    .customer-portal-auth-page { padding:45px 0 65px; }
    .customer-portal-auth-wrap { width:calc(100% - 32px); }
    .customer-portal-welcome-inner { align-items:flex-start; flex-direction:column; }
    .customer-portal-stat-grid { gap:10px; }
    .customer-portal-stat-card { padding:15px; }
    .customer-portal-stat-card strong { font-size:1.6rem; }
    .customer-portal-panel-heading { align-items:flex-start; flex-direction:column; }
    .customer-request-row { align-items:flex-start; flex-direction:column; }
    .customer-request-meta-grid { grid-template-columns:1fr; }
}

/* Colourful Light Mode: pale-blue surfaces, white cards, navy text and cyan actions. */
html[data-theme="light"] .service-detail-page,
html[data-theme="light"] .service-request-page,
html[data-theme="light"] .customer-portal-page,
html[data-theme="light"] .customer-portal-auth-page,
html[data-theme="light"] .service-detail-overview,
html[data-theme="light"] .service-detail-information,
html[data-theme="light"] .service-request-content { color:#173653; background:#eaf2fc; }
html[data-theme="light"] .service-detail-hero,
html[data-theme="light"] .service-request-hero,
html[data-theme="light"] .customer-portal-welcome { background:radial-gradient(circle at 75% 20%,rgba(0,190,255,.18),transparent 38%),linear-gradient(130deg,#d8eafb,#eef5fd 68%); }
html[data-theme="light"] .service-detail-hero h1,
html[data-theme="light"] .service-request-hero h1,
html[data-theme="light"] .customer-portal-welcome h1,
html[data-theme="light"] .service-detail-main-card h2,
html[data-theme="light"] .service-detail-side-card h3,
html[data-theme="light"] .service-info-card h2,
html[data-theme="light"] .service-process-cta h2,
html[data-theme="light"] .service-request-form h2,
html[data-theme="light"] .service-request-sidebar h2,
html[data-theme="light"] .customer-portal-panel h2,
html[data-theme="light"] .customer-portal-auth-card h2 { color:#173653; }
html[data-theme="light"] .service-detail-hero p,
html[data-theme="light"] .service-request-hero p,
html[data-theme="light"] .customer-portal-welcome p,
html[data-theme="light"] .service-detail-main-card p,
html[data-theme="light"] .service-detail-side-card p,
html[data-theme="light"] .service-info-card p,
html[data-theme="light"] .service-process-cta p,
html[data-theme="light"] .customer-portal-auth-card>p { color:#536d87; }
html[data-theme="light"] .service-detail-main-card,
html[data-theme="light"] .service-detail-side-card,
html[data-theme="light"] .service-info-card,
html[data-theme="light"] .service-process-step,
html[data-theme="light"] .service-request-form,
html[data-theme="light"] .service-request-sidebar,
html[data-theme="light"] .customer-portal-panel,
html[data-theme="light"] .customer-portal-stat-card,
html[data-theme="light"] .customer-portal-auth-card { background:linear-gradient(145deg,#fff,#f3f8fe); border-color:#c8dced; box-shadow:0 14px 35px rgba(28,72,112,.07); }
html[data-theme="light"] .service-detail-side-card { background:radial-gradient(circle at 90% 0,rgba(0,192,255,.13),transparent 45%),linear-gradient(145deg,#e0f1ff,#f8fbff); }
html[data-theme="light"] .service-detail-side-card h3,
html[data-theme="light"] .service-info-card h2,
html[data-theme="light"] .service-detail-main-card h2,
html[data-theme="light"] .service-request-sidebar h2 { color:#173653; }
html[data-theme="light"] .service-info-card li,
html[data-theme="light"] .service-process-step p,
html[data-theme="light"] .service-request-form label,
html[data-theme="light"] .service-request-consent span,
html[data-theme="light"] .customer-portal-stat-card strong,
html[data-theme="light"] .customer-request-row-main strong,
html[data-theme="light"] .customer-quick-action strong,
html[data-theme="light"] .customer-request-timeline strong { color:#244c70; }
html[data-theme="light"] .service-process-section { background:linear-gradient(180deg,#e1effd,#edf5fd); }
html[data-theme="light"] .service-process-cta { background:linear-gradient(135deg,#dceeff,#fff); border-color:#b8d7ed; }
html[data-theme="light"] .service-request-form input:not([type=checkbox]):not([type=file]),
html[data-theme="light"] .service-request-form select,
html[data-theme="light"] .service-request-form textarea,
html[data-theme="light"] .customer-portal-form input { color:#173653; background:#f7fbff; border-color:#c4d8e9; }
html[data-theme="light"] .service-request-customer-summary { color:#244c70; background:#e6f3ff; border-color:#c8e0f3; }
html[data-theme="light"] .service-request-customer-summary span,
html[data-theme="light"] .service-request-help,
html[data-theme="light"] .service-request-sidebar p,
html[data-theme="light"] .service-request-side-note ol,
html[data-theme="light"] .customer-portal-status,
html[data-theme="light"] .customer-portal-stat-card span,
html[data-theme="light"] .customer-portal-stat-card small,
html[data-theme="light"] .customer-request-row-main small,
html[data-theme="light"] .customer-portal-empty p,
html[data-theme="light"] .customer-portal-muted,
html[data-theme="light"] .customer-request-requirements,
html[data-theme="light"] .customer-request-timeline p,
html[data-theme="light"] .customer-request-timeline small { color:#536d87; }
html[data-theme="light"] .customer-portal-auth-intro h1 { color:#173653; }
html[data-theme="light"] .customer-portal-auth-intro p,
html[data-theme="light"] .customer-portal-auth-intro li { color:#536d87; }
html[data-theme="light"] .customer-portal-form label { color:#244c70; }
html[data-theme="light"] .customer-portal-security-note { color:#536d87!important; }
html[data-theme="light"] .customer-request-row,
html[data-theme="light"] .customer-portal-panel-heading { border-color:#d6e5f1; }