/* Taraf interface system v4 — presentation only. */
:root{
    --ui-brand:#087565;
    --ui-brand-dark:#04564d;
    --ui-brand-deep:#063b38;
    --ui-brand-soft:#e9f8f4;
    --ui-blue:#2563eb;
    --ui-amber:#c27a09;
    --ui-red:#c23b32;
    --ui-ink:#132b42;
    --ui-muted:#66788a;
    --ui-canvas:#f3f7f8;
    --ui-surface:#fff;
    --ui-line:#dbe5e7;
    --ui-line-strong:#c8d6d9;
    --ui-shadow-xs:0 2px 8px rgba(15,41,66,.04);
    --ui-shadow-sm:0 8px 24px rgba(15,41,66,.07);
    --ui-shadow-md:0 18px 48px rgba(15,41,66,.11);
    --ui-radius-sm:12px;
    --ui-radius:18px;
    --ui-radius-lg:26px;
    --ui-transition:160ms cubic-bezier(.2,.8,.2,1);
}

html{font-size:16px;scrollbar-color:#a9bdb9 #edf2f3}
body{
    color:var(--ui-ink);
    background:
        radial-gradient(circle at 92% -5%,rgba(8,117,101,.12),transparent 28rem),
        radial-gradient(circle at -8% 36%,rgba(37,99,235,.045),transparent 25rem),
        var(--ui-canvas);
    font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
body::before{opacity:.18;background-size:32px 32px}

.app-header{border-color:rgba(216,228,230,.84);background:rgba(255,255,255,.9);box-shadow:0 10px 32px rgba(15,41,66,.065)}
.app-header__inner{width:min(1540px,calc(100% - 2.5rem));min-height:74px}
.app-brand{gap:.85rem}
.app-brand__mark{width:46px;height:46px;border-radius:15px;box-shadow:0 10px 26px rgba(8,117,101,.24),inset 0 1px 0 rgba(255,255,255,.28)}
.app-brand__text strong{font-size:1.02rem}.app-brand__text small{margin-top:.05rem}
.app-header__actions{gap:.75rem}
.user-chip{min-height:44px;padding:.35rem .5rem .35rem .7rem;border-color:#d4e4e1;background:linear-gradient(135deg,#fff,#f0f8f6)}
.user-chip__avatar{width:32px;height:32px;box-shadow:0 4px 10px rgba(8,117,101,.18)}

.primary-nav{border-color:rgba(216,228,230,.9);background:rgba(255,255,255,.93)}
.primary-nav__inner{width:min(1540px,calc(100% - 2.5rem));gap:.5rem;padding:.65rem 0}
.nav-direct,.nav-group summary{min-height:44px;padding:.5rem .75rem;border-radius:13px;font-size:.875rem;transition:all var(--ui-transition)}
.nav-direct:hover,.nav-group summary:hover{transform:translateY(-1px)}
.nav-direct[aria-current="page"],.nav-group.is-active>summary{box-shadow:0 8px 22px rgba(8,117,101,.2)}
.nav-group__menu{border-color:var(--ui-line);border-radius:20px;box-shadow:0 24px 64px rgba(15,41,66,.18)}
.nav-group__menu a{border-radius:13px;transition:background var(--ui-transition),border-color var(--ui-transition),transform var(--ui-transition)}
.nav-group__menu a:hover{transform:translateY(-1px)}

.container{width:min(1540px,calc(100% - 2.5rem));margin:1.6rem auto 5rem}
.page-heading,.page-hero,.onboarding-hero{
    margin-bottom:1.25rem;
    padding:clamp(1.25rem,2.5vw,2rem);
    border-color:#d4e4e1;
    border-radius:var(--ui-radius-lg);
    background:linear-gradient(128deg,#fff 0%,#f5fbf9 56%,#e7f6f2 100%);
    box-shadow:var(--ui-shadow-sm);
}
.page-heading h1,.page-hero h1,.onboarding-hero h1{font-size:clamp(1.7rem,3vw,2.45rem);letter-spacing:-.04em}
.page-heading p,.page-hero p,.onboarding-hero p{line-height:1.8}
.eyebrow{margin-bottom:.35rem;color:var(--ui-brand);font-size:.73rem;letter-spacing:.1em}

.panel,.card,main>article,.form-section,.empty-state{
    border-color:var(--ui-line);
    border-radius:var(--ui-radius);
    box-shadow:var(--ui-shadow-xs);
}
.panel,.card{padding:clamp(1rem,2vw,1.5rem)}
.panel:focus-within,.form-section:focus-within{border-color:#b9d9d2;box-shadow:0 10px 30px rgba(8,117,101,.07)}
.section-heading{align-items:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid #e5edef}
.section-heading h2{font-size:1.35rem}.section-heading small{max-width:620px;line-height:1.6}

.dashboard-cards{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:1.25rem}
.summary-card{min-height:112px;padding:1rem 1.15rem;border-radius:18px}
.summary-card__icon{width:48px;height:48px;border-radius:15px}
.summary-card h2{margin-bottom:.15rem}.summary-card p{font-size:1.03rem;line-height:1.45}

.finance-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.finance-card{
    min-height:128px;
    align-content:space-between;
    padding:1rem 1.05rem;
    border-color:#dce7e8;
    border-radius:18px;
    background:linear-gradient(145deg,#fff,#f8fbfb);
    box-shadow:var(--ui-shadow-xs);
}
.finance-card::before{width:4px;border-radius:4px}
.finance-card::after{content:"";position:absolute;z-index:0;inset-inline-end:-26px;inset-block-end:-38px;width:95px;height:95px;border-radius:50%;background:rgba(8,117,101,.055)}
.finance-card>*{position:relative;z-index:1}
.finance-card>span{line-height:1.5}.finance-card>strong{font-size:clamp(1.3rem,2vw,1.72rem);letter-spacing:-.025em}
.finance-card>small{font-size:.72rem;line-height:1.55}
.finance-card--expense::after,.finance-card--purchases::after,.finance-card--payable::after{background:rgba(194,122,9,.07)}
.finance-card--purchases{color:inherit;text-decoration:none;background:linear-gradient(145deg,#fff,#fffaf0);border-color:#eadbb9}
.finance-card--purchases::before{background:var(--ui-amber)}
.finance-card--inventory{color:inherit;text-decoration:none;background:linear-gradient(145deg,#fff,#eef7ff);border-color:#cfe0f3}
.finance-card--inventory::before{background:var(--ui-blue)}
.finance-card--inventory::after{background:rgba(37,99,235,.07)}
.finance-card--purchases:hover,.finance-card--inventory:hover,.finance-card--payable:hover{transform:translateY(-3px)}

input,select,textarea{
    min-height:50px;
    border-color:#acbdc6;
    border-radius:13px;
    padding:.72rem .85rem;
    transition:border-color var(--ui-transition),box-shadow var(--ui-transition),background var(--ui-transition);
}
textarea{min-height:104px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--ui-brand);box-shadow:0 0 0 4px rgba(8,117,101,.15)}
input::placeholder,textarea::placeholder{color:#95a3ae}
label{color:#2b4358;font-size:.86rem;line-height:1.55}
.form-grid{gap:1rem 1.1rem}
.form-actions{padding-top:.85rem;border-top:1px solid #e7edef}
.button{min-height:48px;border-radius:13px;padding:.68rem 1.1rem;box-shadow:0 7px 18px rgba(8,117,101,.14);transition:all var(--ui-transition)}
.button:hover:not(:disabled){transform:translateY(-2px)}
.button:active:not(:disabled){transform:translateY(0);box-shadow:none}
.button.secondary,.button.ghost{box-shadow:none}
.button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(8,117,101,.3);outline-offset:3px}

.notice{margin:1rem 0;padding:1rem 1.1rem;border-radius:15px;box-shadow:var(--ui-shadow-xs);line-height:1.7}
.notice.info{background:linear-gradient(135deg,#fff,#eef9f6)}
.badge,.status-pill,.connection{border-radius:999px;font-size:.78rem;letter-spacing:.01em}

.table-wrap{position:relative;border-color:var(--ui-line);border-radius:17px;box-shadow:var(--ui-shadow-xs)}
table{min-width:720px}
th{padding:.82rem .9rem;background:#edf4f3;color:#334b5d;font-size:.76rem;text-transform:none}
td{padding:.82rem .9rem;line-height:1.55}
tbody tr{transition:background var(--ui-transition)}
tbody tr:nth-child(even){background:#fbfcfc}tbody tr:hover{background:#edf8f5}

.pos-layout{grid-template-columns:minmax(0,1.65fr) minmax(360px,.75fr);gap:1.1rem;align-items:start}
.pos-catalog,.cart{border-color:var(--ui-line);border-radius:22px;box-shadow:var(--ui-shadow-sm)}
.pos-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.pos-tile,.catalog-tile{min-height:112px;padding:1rem;border-radius:16px}
.product-card{min-height:238px}
.product-card .price{font-size:1.4rem}
.barcode-scan{padding:.9rem 1rem;border-radius:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.cart{top:9.4rem;max-height:calc(100vh - 10.5rem);padding:1.1rem}
.cart-line{border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(15,41,66,.035)}
.cart-total{border-radius:15px;box-shadow:0 8px 22px rgba(8,117,101,.1)}
.checkout-submit{min-height:58px;border-radius:15px;font-size:1.02rem}
.tender-card{border-radius:16px;background:linear-gradient(145deg,#fff,#f5fbf9)}
.empty-cart,.empty-state{border-width:1px;background:linear-gradient(145deg,#fff,#f7fafb)}

.repair-page{gap:1.35rem}.repair-hero{border-radius:var(--ui-radius-lg)}
.repair-stats article,.repair-panel,.repair-job{box-shadow:var(--ui-shadow-sm)}
.repair-job{transition:transform var(--ui-transition),box-shadow var(--ui-transition)}
.repair-job:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-md)}

.auth-shell{min-height:calc(100vh - 2rem)}
.auth-card{border-color:#d7e4e5;border-radius:28px;box-shadow:0 28px 80px rgba(15,41,66,.15)}
.auth-card .button.wide{min-height:54px}
.app-footer{margin-top:1rem;padding:1.1rem;border:1px solid rgba(219,229,231,.75);background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}

@media(max-width:1200px){
    .finance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .pos-layout{grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr)}
}

@media(max-width:900px){
    .app-header__inner,.primary-nav__inner,.container{width:calc(100% - 1.5rem)}
    .finance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pos-layout{grid-template-columns:1fr}.cart{position:static;max-height:none}
}

@media(max-width:760px){
    body{padding-bottom:82px;background:linear-gradient(180deg,#f8fbfb,var(--ui-canvas))}
    .app-header__inner{width:calc(100% - 1rem);min-height:62px}
    .app-header__actions{gap:.4rem}.user-chip{min-height:40px}
    .primary-nav{padding-top:max(1rem,env(safe-area-inset-top));border-radius:24px 0 0 24px}
    [dir="ltr"] .primary-nav{border-radius:0 24px 24px 0}
    .nav-direct,.nav-group summary{min-height:54px;border-radius:14px}
    .nav-group__menu a{min-height:56px}
    .mobile-dock{min-height:72px;border-color:#d7e3e5;box-shadow:0 -14px 34px rgba(15,41,66,.12)}
    .mobile-dock a,.mobile-dock button{border-radius:14px}
    .container{width:calc(100% - 1rem);margin:1rem auto 2rem}
    .page-heading,.page-hero,.onboarding-hero{padding:1.1rem;border-radius:20px}
    .page-heading h1,.page-hero h1{font-size:1.6rem}
    .panel,.card,.form-section{padding:1rem;border-radius:17px}
    .finance-card{min-height:116px;padding:.9rem}
    .finance-card>strong{font-size:1.3rem}
    .table-wrap{margin-inline:-.1rem;border-radius:14px}
    th,td{padding:.72rem .75rem}
    .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pos-tile,.catalog-tile{min-height:105px;padding:.8rem}
    .auth-card{border-radius:22px}
}

@media(max-width:520px){
    .app-brand__text strong{font-size:.9rem}
    .dashboard-cards{grid-template-columns:1fr}
    .summary-card{min-height:96px}
    .finance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
    .finance-card{min-height:122px;padding:.82rem}
    .finance-card>span{font-size:.76rem}.finance-card>small{font-size:.67rem}
    .finance-card>strong{font-size:1.18rem}
    .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
    .product-card{min-height:210px}
    .form-actions{gap:.6rem}.button{width:100%}
    .repair-stats{grid-template-columns:1fr 1fr}
}

@media(max-width:370px){
    .finance-grid,.pos-grid{grid-template-columns:1fr}
}

@media(hover:none){
    .summary-card:hover,.finance-card:hover,.pos-tile:hover,.catalog-tile:hover,.repair-job:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media print{body{background:#fff}.app-header,.primary-nav,.mobile-dock,.nav-scrim,.app-footer{display:none!important}.container{width:100%;margin:0}.panel,.card,article{box-shadow:none!important;transform:none!important}}