:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#19324d;background:#f3f6fa;font-size:14px}*{box-sizing:border-box}body{margin:0}a{color:#005599;text-decoration:none}a:hover{text-decoration:underline}aside{position:fixed;inset:0 auto 0 0;width:225px;background:#003366;color:#fff;padding:32px 24px;display:flex;flex-direction:column;gap:40px}.brand{font-size:38px;font-weight:750;letter-spacing:-2px;color:inherit}.brand span{display:block;font-size:12px;font-weight:400;letter-spacing:1px;margin-top:6px;opacity:.65}nav{display:grid;gap:12px}nav a{color:#dce9f7;padding:12px 6px}aside form{margin-top:auto}main{margin-left:225px;padding:28px 40px;max-width:1800px}header{display:flex;justify-content:space-between;color:#657b91;border-bottom:1px solid #d6e1ed;padding-bottom:22px;margin-bottom:30px}.title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}h1{font-size:30px;letter-spacing:-.8px;margin:0 0 10px}h2{font-size:17px;margin:0 0 20px}p{line-height:1.6}small,.muted{color:#60758b}td small{display:block;margin-top:2.52px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}section{background:#fff;border:1px solid #dce5ef;border-radius:12px;padding:24px;margin-bottom:22px}.cards section{margin:0;min-height:130px}.cards small{display:block;margin-bottom:18px}.cards strong{font-size:25px}.table{overflow:auto;background:#fff;border-radius:10px;border:1px solid #dce5ef}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;background:#e8eff7;color:#47627e;font-size:12px;white-space:nowrap}td,th{text-align:left;padding:5.88px 12px;border-bottom:1px solid #e5ecf4}tr:last-child td{border:0}.badge{display:inline-block;white-space:nowrap;background:#e3effb;color:#00508c;padding:6px 9px;border-radius:6px;font-size:12px}.grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formcard{max-width:960px}label{display:block;font-size:13px;font-weight:550;margin-bottom:16px}input,select,textarea{display:block;width:100%;padding:11px 12px;border:1px solid #c7d6e6;border-radius:7px;background:white;color:#19324d;font:inherit;margin-top:7px}textarea{min-height:85px;resize:vertical}button,.button{display:inline-block;border:0;border-radius:7px;background:#005599;color:#fff;font:inherit;font-weight:600;padding:12px 18px;cursor:pointer}button:hover,.button:hover{background:#004477;text-decoration:none}.secondary{background:#1a4d80}.checks{display:flex;flex-wrap:wrap;gap:20px}.checks label{display:flex;align-items:center;gap:8px}.checks input{width:18px;height:18px;margin:0;accent-color:#005599}.filters{display:flex;gap:12px;margin-bottom:22px}.filters input{flex:1;margin:0}.filters select{width:180px;margin:0}.empty{text-align:center;padding:55px;color:#60758b}.error{padding:16px;border:1px solid #efb7b7;background:#fff0ee;border-radius:8px;margin-bottom:24px;color:#9f3737}.login{margin:9vh auto;padding:40px;width:440px;max-width:94vw;background:white;border:1px solid #d6e1ed;border-radius:16px}.login .brand{color:#003366;margin-bottom:38px}.login h1{font-size:26px}.login button{width:100%}.balance{display:block;font-size:27px;margin-top:10px}input:focus,select:focus,textarea:focus{outline:2px solid #6ba3d6;outline-offset:2px}@media(max-width:900px){aside{position:static;width:auto;padding:18px 22px;display:flex;flex-direction:row;align-items:center;gap:22px}.brand{font-size:28px}.brand span{display:none}nav{display:flex;gap:8px;flex:1}nav a{font-size:12px;padding:4px}aside form{margin:0}aside button{padding:8px;font-size:12px}main{margin:0;padding:22px 16px}.grid{grid-template-columns:1fr}.cards{gap:10px}.cards section{padding:15px}.cards strong{font-size:19px}.fields{grid-template-columns:1fr}.title{align-items:flex-start}h1{font-size:25px}.filters{flex-wrap:wrap}}@media print{aside,header,.no-print{display:none}main{margin:0;padding:0}body{background:white}section{border:0;padding:5px}.table{overflow:visible;border:0}a{color:inherit}.title{margin:15px 0}table{font-size:11px}tr{break-inside:avoid}}

@media(max-width:900px){aside{flex-wrap:wrap}nav{flex-wrap:wrap;min-width:200px}nav a{white-space:nowrap}.filters .button{white-space:nowrap}}

.filters .filter-check{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}.filters .filter-check input{flex:none;width:18px;height:18px;margin:0;accent-color:#005599}

.copy-job{display:inline-flex;align-items:center;justify-content:center;width:32px;height:27px;border-radius:6px;background:#e3effb;color:#00508c;vertical-align:middle}.copy-job:hover{background:#cddff2;text-decoration:none}.copy-job:focus-visible{outline:2px solid #005599;outline-offset:2px}

.badge.status-done{background:#dcf3e5;color:#166039}.badge.status-partial{background:#fff0d6;color:#8a4b05}.badge.status-open{background:#ffedd5;color:#9a3412}

.badge.status-waiting{background:#eceff2;color:#505965}

.date-control{display:block;position:relative;margin-top:7px}.date-control>input[data-date]{margin-top:0;padding-right:56px}.date-calendar{position:absolute;top:1px;right:1px;bottom:1px;width:44px;display:flex;align-items:center;justify-content:center;background:#e8eff7;color:#005599;border-radius:0 6px 6px 0;overflow:hidden}.date-calendar>span{display:flex;pointer-events:none}.date-calendar>input[type="date"]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px}.date-calendar>input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer}.date-calendar:focus-within{outline:2px solid #005599;outline-offset:2px}

td.amount,th.amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

.account-statement td,.account-statement th{padding-top:3.36px;padding-bottom:3.36px}.account-statement td small{margin-top:1.26px}

/* Alternating list rows keep dense tables easy to follow. */
table tr:nth-child(odd)>td{background:#fff}table tr:nth-child(even)>td{background:#edf3fa}table tr:hover>td{background:#dce9f7}

/* Compact vertical spacing in lists. */
table td,table th,.account-statement td,.account-statement th{padding-top:3px;padding-bottom:3px;line-height:1.3}table td small,.account-statement td small{margin-top:0}table .badge{padding-top:0;padding-bottom:0}table .copy-job{height:18px}table td p{margin-top:0;margin-bottom:0}table td form{margin-top:0;margin-bottom:0}table td label{margin-bottom:0}

/* Double-height list headings at the existing font size. */
table th,.account-statement th{padding-top:13.8px;padding-bottom:13.8px;background:#003366;color:#fff}

/* Center selected column headings without changing cell alignment. */
table th.heading-center{text-align:center}

.negative-balance{color:#c62828}

/* Negative balances color the entire customer row, including links. */
table tr.negative-balance-row,table tr.negative-balance-row td,table tr.negative-balance-row td *{color:#c62828}

#contact-form{margin-top:20px}

button.sort-heading{padding:0;background:transparent;color:inherit;font:inherit;border-radius:0}button.sort-heading:hover{background:transparent;text-decoration:underline}button.sort-heading:focus-visible{outline:2px solid white;outline-offset:4px}

.company-phones{display:inline-block;vertical-align:top}.phone-details{display:inline-block;margin-left:8px;vertical-align:top}.phone-details summary{cursor:pointer;color:#005599;list-style:none;text-decoration:underline}.phone-details summary::-webkit-details-marker{display:none}.phone-hide{display:none}.phone-details[open] .phone-show{display:none}.phone-details[open] .phone-hide{display:inline}.phone-details[open]{display:block;margin-left:0;margin-top:4px}.phone-list{padding:6px 0;text-align:left;white-space:normal}.phone-person{padding:4px 0;border-top:1px solid #c7d6e6}.phone-person span{display:block;font-size:12px}.phone-person a{white-space:nowrap}

/* Match heading alignment to its data column. */
table th{text-align:left}table th.amount,table td.amount{text-align:right}table th .sort-heading{text-align:inherit}@media print{[data-sort-arrow]{display:none}}

.company-name{font-weight:700}table .account-button{padding:3px 10px;font-size:12px;line-height:1.2}table tr.negative-balance-row td a.account-button{color:#fff}

.phone-details summary{display:inline-block;padding:3px 10px;border-radius:7px;background:#005599;color:#fff;font-size:12px;font-weight:600;line-height:1.2;text-decoration:none}.phone-details summary:hover{background:#004477}.phone-details summary:focus-visible{outline:2px solid #005599;outline-offset:2px}table tr.negative-balance-row td .phone-details summary,table tr.negative-balance-row td .phone-details summary *{color:#fff}

/* List buttons fit the text line without increasing row height. */
table .account-button,table .phone-details summary{height:16.9px;padding:0 8px;font-size:11px;line-height:16.9px;vertical-align:baseline}table .copy-job{height:16.9px}table .copy-job svg{width:14px;height:14px}

/* Transparent list controls. */
table .account-button,table .account-button:hover,table .phone-details summary,table .phone-details summary:hover,table .copy-job,table .copy-job:hover{background:transparent;color:#005599}table tr.negative-balance-row td a.account-button,table tr.negative-balance-row td .phone-details summary,table tr.negative-balance-row td .phone-details summary *{color:#c62828}

/* Outline transparent list controls within the existing height. */
table .account-button,table .phone-details summary,table .copy-job{border:1px solid currentColor}table .account-button,table .phone-details summary{line-height:14.9px}

.company-action{background:transparent;color:#005599;border:1px solid currentColor;padding:4px 10px;font-size:13px;line-height:1.3}.company-action:hover{background:transparent;color:#004477}

.job-toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:120px;height:42px;padding:0 16px;flex-shrink:0;background:#003366;color:#fff;font-size:14px;line-height:1.2}.job-toolbar-button:hover{background:#003366;color:#fff}.filters:has(.job-toolbar-button){align-items:center}

header{align-items:center;gap:16px;flex-wrap:wrap}.header-date{color:#003366;text-align:right;margin-left:auto;line-height:1.2}

.header-date .header-weekday{display:inline;font-size:inherit;font-weight:100;letter-spacing:inherit;margin-top:0;opacity:1}

.workspace-label{font-weight:100;color:#003366;line-height:1.2}

.logo-brand img{display:block;width:135px;max-width:100%;height:auto}.login .logo-brand{display:inline-block;padding:14px;background:#003366;border-radius:12px;color:#fff}.login .logo-brand img{width:126px}@media(max-width:900px){aside .logo-brand img{width:57.6px}}

/* Center navigation and logo; match the balance font size. */
aside{overflow-y:auto}aside>.logo-brand{align-self:center}aside nav{text-align:center}aside nav a{font-size:27px;line-height:1.2} @media(max-width:900px){aside{justify-content:center}aside nav{justify-content:center;flex-basis:100%}aside nav a{font-size:27px}}

/* Tighter menu items with five times the logo-to-menu gap. */
aside nav{gap:4px;margin-top:160px}aside nav a{padding:6px}@media(max-width:900px){aside nav{margin-top:88px;gap:4px}aside nav a{padding:3px 6px}}

aside nav a{font-weight:700}

/* Keep each navigation label on one line. */
aside nav a{white-space:nowrap;font-size:24px}@media(max-width:900px){aside nav a{font-size:clamp(16px,4vw,24px)}}

/* Equal-sized navigation buttons. */
aside nav{justify-items:center}aside nav a{display:inline-flex;align-items:center;justify-content:center;width:177px;height:48px;padding:0 8px;border:1px solid #7399bf;border-radius:7px;background:#144779;color:#fff;text-decoration:none;box-sizing:border-box}aside nav a:hover{background:#225b93;border-color:#b8d1ea}aside nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:900px){aside nav a{width:177px;height:48px;font-size:22px}}

aside nav{gap:10px}aside>form{align-self:center;text-align:center}aside>form button{display:inline-flex;align-items:center;justify-content:center;text-align:center}@media(max-width:900px){aside nav{gap:10px}aside>form{flex-basis:100%}}

/* Move the sidebar logo down by its own rendered height. */
aside>.logo-brand{transform:translateY(100%)}

/* Shift the navigation down by two 48px buttons. */
aside nav{margin-top:256px}@media(max-width:900px){aside nav{margin-top:184px}}

aside nav{margin-top:268px;gap:22px}@media(max-width:900px){aside nav{margin-top:196px;gap:22px}}

/* Account navigation stays at the bottom of the sidebar. */
aside>.logo-brand,aside>nav,aside>.sidebar-bottom{flex-shrink:0}.sidebar-bottom{margin-top:auto;text-align:center}.sidebar-bottom nav{margin-top:0;gap:22px}.sidebar-bottom form{margin:16px 0 0;text-align:center}@media(max-width:900px){aside>.sidebar-bottom{flex-basis:100%}.sidebar-bottom nav{margin-top:0}}

/* Match all bottom account controls to the logout button. */
.sidebar-bottom nav a,.sidebar-bottom form button{display:inline-flex;align-items:center;justify-content:center;width:120px;height:42px;padding:0 12px;border:0;border-radius:7px;background:#1a4d80;color:#fff;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none}.sidebar-bottom nav a:hover,.sidebar-bottom form button:hover{background:#004477;color:#fff}.sidebar-bottom form{margin-top:22px}
@media(max-width:900px){.sidebar-bottom nav a,.sidebar-bottom form button{width:100px;height:32px;padding:0 8px;font-size:12px}}

/* Center the primary menu between the logo and bottom controls. */
@media(min-width:901px){aside{gap:22px}aside>.logo-brand{transform:none;margin-top:107.1px}aside>nav{margin-top:auto;margin-bottom:auto;gap:22px}aside>.sidebar-bottom{margin-top:0}}

/* Compact mobile navigation, expanded only on request. */
.mobile-menu-toggle{display:none}
@media screen and (max-width:900px){
 aside{position:static;width:100%;padding:10px 16px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;overflow:visible}
 aside>.logo-brand{transform:none;margin:0;align-self:center;line-height:0}
 aside .logo-brand img{width:48px;height:auto}
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;font-size:15px;background:#144779;border:1px solid #7399bf}
 .mobile-menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
 aside>nav,aside>.sidebar-bottom{display:none}
 aside.mobile-menu-open>nav{display:grid;grid-template-columns:1fr 1fr;flex-basis:100%;min-width:0;margin:4px 0 0;gap:8px}
 aside nav a{width:100%;height:auto;min-height:44px;font-size:15px;padding:10px 8px}
 aside.mobile-menu-open>.sidebar-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%;margin:0;padding:10px 0 2px;border-top:1px solid #37618b}
 .sidebar-bottom nav{display:flex;flex-wrap:wrap;flex:1;min-width:0;margin:0;gap:8px}
 .sidebar-bottom nav a,.sidebar-bottom form button{width:auto;min-height:44px;height:auto;padding:10px 12px;font-size:13px}
 .sidebar-bottom form{margin:0}
}

/* Pinarbas wordmark */
.login .logo-brand{display:block;background:#fff;padding:14px 8px;border-radius:12px}.login .logo-brand img{width:320px;max-width:100%;height:auto;margin:auto}aside>.logo-brand{display:block;background:#fff;padding:12px 8px;border-radius:8px;max-width:100%}aside .logo-brand img{width:193px;max-width:100%;height:auto}@media(max-width:900px){aside .logo-brand img{width:160px}aside>.logo-brand{padding:8px}}

/* White wordmark on brand blue */
.login .logo-brand,aside>.logo-brand{background:#203d6b;isolation:isolate}.logo-brand img[src*="pinarbas-logo"]{filter:grayscale(1) invert(1) contrast(10);mix-blend-mode:screen}

/* Transparent logo, no surrounding panel */
.login .logo-brand,aside>.logo-brand{background:transparent;padding:0;border-radius:0;isolation:auto}.logo-brand img[src*="pinarbas-logo"]{filter:none;mix-blend-mode:normal}aside .logo-brand img[src*="pinarbas-logo"]{filter:brightness(0) invert(1)}

.badge.status-cancelled{background:#fee2e2;color:#b91c1c}

.badge,table .badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:96px;height:24px;padding:0 5px;font-size:12px;line-height:1;vertical-align:middle}

.badge,table .badge{border:1px solid currentColor}