/* Console: light, flat theme. Loaded after console-element.css. Remove the <link> in head.php to revert. */
:root{--c-bg:#f6f7f9;--c-card:#fff;--c-line:#e6e9ef;--c-text:#1f2937;--c-muted:#6b7280;--c-accent:#2563eb;--c-accent-soft:#eef3ff;--c-ease:cubic-bezier(.22,1,.36,1)}
body{background:var(--c-bg)!important;color:var(--c-text)}

/* sidebar */
.app-sidebar{background:#fff!important;box-shadow:none!important;border-right:1px solid var(--c-line)}
.app-sidebar-logo{background:#fff!important;color:var(--c-text)!important;border-bottom:1px solid var(--c-line);font-weight:600}
.app-sidebar-logo span{color:var(--c-text)}
.app-menu > li > a{color:#4b5563!important;margin:2px 10px;border-radius:8px;transition:background .15s,color .15s}
.app-menu > li > a:hover{background:#f3f5f8!important;color:var(--c-text)!important}
.app-menu > li.is-active > a,.app-menu li > a.is-active{background:var(--c-accent-soft)!important;color:var(--c-accent)!important;font-weight:600}
.app-menu a i.fa{color:#9aa3b2}
.app-menu > li.is-active > a i.fa,.app-menu li > a.is-active i.fa{color:var(--c-accent)}
.app-submenu{background:transparent!important;margin:0 10px}
.app-submenu a{color:#6b7280!important;border-radius:6px;transition:color .15s,background .15s}
.app-submenu a:hover{color:var(--c-text)!important;background:#f3f5f8!important}
.app-submenu li.is-active > a{color:var(--c-accent)!important;background:var(--c-accent-soft)!important;font-weight:600}
.app-menu .caret-icon{transition:transform .2s var(--c-ease)}
.app-sidebar::-webkit-scrollbar{width:6px}
.app-sidebar::-webkit-scrollbar-thumb{background:#d8dde6;border-radius:3px}

/* top bar */
.app-navbar{background:#fff!important;border-bottom:1px solid var(--c-line)!important;box-shadow:none!important}
.app-navbar .btn-toggle{border-radius:8px;transition:background .15s}
.app-navbar .btn-toggle:hover{background:#f3f5f8!important}
.app-navbar-right a{color:var(--c-muted)!important;border-radius:8px;transition:background .15s,color .15s}
.app-navbar-right a:hover{background:#f3f5f8!important;color:var(--c-text)!important}
.app-breadcrumb{background:transparent!important}

/* content */
@keyframes cIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app-main > .container-fluid{animation:cIn .35s var(--c-ease) both}
.app-main .fox-card,.app-main .panel{background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:10px!important;box-shadow:none!important;overflow:hidden}
.app-main .fox-card-head,.app-main .panel-heading{background:#fff!important;border-bottom:1px solid var(--c-line)!important;padding:14px 18px!important}
.app-main .panel-heading[style*="background"]{background:#fff!important}
.app-main .fox-card-title,.app-main .panel-title{font-size:15px;font-weight:600;color:var(--c-text)}
.app-main .fox-card .list-group,.app-main .fox-card > .list-group{margin:0!important;border-radius:0!important}
.app-main .fox-card .list-group-item{border:0!important;border-top:1px solid var(--c-line)!important;border-radius:0!important;padding:12px 18px!important;background:transparent!important}

/* stat tiles: white cards, colored left edge, dark numbers */
.app-main .small-box{background:#fff!important;color:var(--c-text)!important;border:1px solid var(--c-line)!important;border-left:4px solid var(--c-accent)!important;border-radius:10px!important;box-shadow:none!important;overflow:hidden;transition:border-color .2s,transform .25s var(--c-ease)}
.app-main .small-box:hover{transform:translateY(-2px)}
.app-main .small-box.bg-primary{border-left-color:#2563eb!important;background:#fff!important}
.app-main .small-box.bg-success{border-left-color:#16a34a!important;background:#fff!important}
.app-main .small-box.bg-warning{border-left-color:#d97706!important;background:#fff!important}
.app-main .small-box.bg-info{border-left-color:#0891b2!important;background:#fff!important}
.app-main .small-box.bg-danger{border-left-color:#dc2626!important;background:#fff!important}
.app-main .small-box > .inner{padding:16px 18px 14px!important;position:relative;z-index:1}
.app-main .small-box h3,.app-main .small-box h3 span{color:var(--c-text)!important;font-size:1.6rem!important;font-weight:700!important;margin:0 0 4px!important;text-shadow:none!important}
.app-main .small-box h3 small{color:var(--c-muted)!important}
.app-main .small-box p{color:var(--c-muted)!important;font-size:13px!important;opacity:1!important}
.app-main .small-box .icon{color:#2563eb!important;opacity:.12;transition:opacity .25s}
.app-main .small-box.bg-success .icon{color:#16a34a!important}
.app-main .small-box.bg-warning .icon{color:#d97706!important}
.app-main .small-box.bg-info .icon{color:#0891b2!important}
.app-main .small-box.bg-danger .icon{color:#dc2626!important}
.app-main .small-box:hover .icon{opacity:.2}

/* tables */
.app-main .table > thead > tr > th,.app-main .fox-table > thead > tr > th{background:#fafbfc!important;color:#64748b!important;font-size:13px!important;font-weight:600!important;padding:12px 14px!important;border-bottom:1px solid var(--c-line)!important}
.app-main .table > tbody > tr > td{padding:12px 14px!important;border-top:1px solid #eef0f4!important}
.app-main .table-striped > tbody > tr:nth-of-type(odd){background:#fff!important}
.app-main .table > tbody > tr:hover{background:#f8fafc!important}

/* controls */
.app-main .btn{border-radius:8px!important;transition:background .15s,border-color .15s,box-shadow .15s}
.app-main .btn-default{background:#fff!important;border-color:#d9dee7!important;color:#374151!important}
.app-main .btn-default:hover{background:#f6f7f9!important;border-color:#c3cad6!important}
.app-main .btn-primary{background:var(--c-accent)!important;border-color:var(--c-accent)!important}
.app-main .btn-primary:hover{background:#1d4fd8!important}
.app-main .form-control{border-radius:8px!important;border-color:#d9dee7!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.app-main .form-control:focus{border-color:var(--c-accent)!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}
.app-main .label{border-radius:6px;font-weight:500}
.app-main .modal-content{border-radius:12px!important;border:0!important;box-shadow:0 20px 50px -20px rgba(17,24,39,.4)!important}
.app-main .alert{border-radius:8px!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* dashboard data formatting (paired with console-polish.js) */
.app-main .small-box h3 span{font-variant-numeric:tabular-nums}
.app-main #paytype_head th:not(:first-child),.app-main #channel_head th:not(:first-child),.app-main #profit_paytype_head th:not(:first-child){text-align:right}
.app-main td.cp-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--c-text)}
.app-main td.cp-zero{color:#b8c0cc}
.app-main td.cp-total{font-weight:600}
.app-main tr.cp-today > td{background:#f5f8ff!important}
.app-main tr.cp-today > td:first-child{color:var(--c-accent);font-weight:600}
.app-main #paytype_list td:first-child,.app-main #channel_list td:first-child,.app-main #profit_paytype_list td:first-child{color:var(--c-muted);font-variant-numeric:tabular-nums}
.app-main td.cp-num{white-space:nowrap}

/* dashboard tiles: one even, wrapping row with larger numbers */
.app-main .small-box-row{display:flex!important;flex-wrap:wrap;gap:14px;margin:0 0 18px!important}
.app-main .small-box-row > [class*="col-"]{flex:1 1 200px;width:auto!important;max-width:none!important;float:none!important;padding:0!important}
.app-main .small-box-row .small-box{margin:0!important;height:100%;min-height:104px}
.app-main .small-box > .inner{padding:18px 20px 16px!important}
.app-main .small-box h3,.app-main .small-box h3 span{font-size:2rem!important;line-height:1.15;letter-spacing:-.02em}
.app-main .small-box h3 small{font-size:1.05rem!important;margin-left:2px}
.app-main .small-box p{margin-top:2px!important;font-size:13px!important}
.app-main .small-box .icon{font-size:56px!important;right:16px!important;top:50%!important;transform:translateY(-50%)}
.app-main .small-box:hover .icon{font-size:56px!important;transform:translateY(-50%) scale(1.08)}

/* KPI strip: the five dashboard stats as one divided card */
.app-main .small-box-row{display:flex!important;flex-wrap:wrap;gap:1px!important;margin:0 0 18px!important;background:var(--c-line);border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.app-main .small-box-row > [class*="col-"]{flex:1 1 190px;width:auto!important;max-width:none!important;float:none!important;padding:0!important;margin:0!important;background:#fff}
.app-main .small-box-row .small-box{background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0;height:100%;margin:0!important;transform:none!important}
.app-main .small-box-row .small-box:hover{transform:none!important}
.app-main .small-box-row .small-box .icon{display:none!important}
.app-main .small-box-row .small-box > .inner{padding:20px 24px 18px!important}
.app-main .small-box-row .small-box p{order:-1;margin:0 0 8px!important;font-size:12.5px!important;letter-spacing:.02em;color:var(--c-muted)!important;display:flex;align-items:center;gap:8px}
.app-main .small-box-row .small-box .inner{display:flex;flex-direction:column}
.app-main .small-box-row .small-box p::before{content:"";width:8px;height:8px;border-radius:50%;background:#2563eb;flex:none}
.app-main .small-box-row .small-box.bg-success p::before{background:#16a34a}
.app-main .small-box-row .small-box.bg-warning p::before{background:#d97706}
.app-main .small-box-row .small-box.bg-info p::before{background:#0891b2}
.app-main .small-box-row .small-box.bg-danger p::before{background:#dc2626}
.app-main .small-box-row .small-box h3,.app-main .small-box-row .small-box h3 span{font-size:1.75rem!important;font-weight:700!important;margin:0!important}

/* trend chart */
.app-main .cp-chart .fox-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cp-legend{display:flex;gap:6px;flex-wrap:wrap}
.cp-lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c-line);background:#fff;color:#374151;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;transition:opacity .15s,border-color .15s}
.cp-lg i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cp-lg:hover{border-color:#c3cad6}
.cp-lg.off{opacity:.4}
.cp-plot{position:relative;padding:8px 8px 4px}
.cp-plot svg{display:block;width:100%;overflow:visible}
.cp-grid{stroke:#edf0f5;stroke-width:1}
.cp-ytxt,.cp-xtxt{fill:#8a94a6;font-size:11px;font-variant-numeric:tabular-nums}
.cp-cur{stroke:#c3cad6;stroke-width:1;stroke-dasharray:3 3}
.cp-line{stroke-dasharray:1;stroke-dashoffset:1;animation:cpDraw 1.1s var(--c-ease) .1s forwards}
.cp-area{opacity:0;animation:cpFade .8s ease .6s forwards}
@keyframes cpDraw{to{stroke-dashoffset:0}}
@keyframes cpFade{to{opacity:1}}
.cp-tip{display:none;position:absolute;z-index:5;pointer-events:none;background:#111827;color:#fff;border-radius:8px;padding:8px 10px;font-size:12px;min-width:140px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.cp-tip b{display:block;margin-bottom:4px;font-weight:600}
.cp-tip div{display:flex;align-items:center;gap:6px;line-height:1.7}
.cp-tip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.cp-tip span{margin-left:auto;padding-left:14px;font-variant-numeric:tabular-nums}
.cp-empty{padding:40px;text-align:center;color:var(--c-muted)}
@media (prefers-reduced-motion:reduce){.cp-line{animation:none;stroke-dashoffset:0}.cp-area{animation:none;opacity:1}}