/*
 * agent/agent_theme.css — High Contrast Guide UI 2026-08-28
 * Shared visual layer for all Guide/Agent pages.
 * Keeps existing PHP/HTML logic intact; improves legibility and hierarchy.
 */
:root{
  --agent-navy-1:#06162c;
  --agent-navy-2:#0b2a52;
  --agent-navy-3:#174a86;
  --agent-blue:#2267d8;
  --agent-blue-2:#1557bd;
  --agent-gold-1:#fff8d8;
  --agent-gold-2:#f6d96f;
  --agent-gold-3:#d7a923;
  --agent-gold-4:#936400;
  --agent-ink:#10243f;
  --agent-ink-2:#1e385b;
  --agent-muted:#556b89;
  --agent-muted-2:#71839d;
  --agent-line:#cbd9eb;
  --agent-line-strong:#b7cae2;
  --agent-surface:#ffffff;
  --agent-surface-soft:#f6f9fd;
  --agent-success:#11824f;
  --agent-danger:#bd2d36;
  --agent-shadow:0 14px 34px rgba(12,38,76,.13);
  --agent-shadow-soft:0 7px 20px rgba(12,38,76,.10);
  --agent-ring:0 0 0 3px rgba(34,103,216,.18);

  --ink:var(--agent-ink);
  --dark:var(--agent-navy-1);
  --gold-1:var(--agent-gold-1);
  --gold-2:var(--agent-gold-2);
  --gold-3:var(--agent-gold-3);
  --gold-4:var(--agent-gold-4);
  --muted:var(--agent-muted);
  --line:var(--agent-line);
  --line-soft:var(--agent-line);
  --shadow:var(--agent-shadow);
  --shadow-main:var(--agent-shadow);
  --ring:var(--agent-ring);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  color:var(--agent-ink)!important;
  font-family:"Sarabun","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(700px 320px at 110% -80px,rgba(246,217,111,.18),transparent 62%),
    radial-gradient(650px 320px at -15% 0,rgba(73,145,233,.13),transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#edf4fc 58%,#e8f1fb 100%)!important;
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}
body::before{background:none!important}
body::after{display:none!important}
a{color:inherit}

.phone-page{width:min(100%,520px)!important;min-height:100dvh;margin:0 auto;padding:0 13px calc(18px + env(safe-area-inset-bottom))!important}

/* Header */
.top-strip,.topbar{
  position:sticky;top:0;z-index:1030;
  background:linear-gradient(135deg,#1d508c 0%,#0d315f 55%,#071a34 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 8px 24px rgba(5,22,48,.22)!important;
}
.top-strip{min-height:62px;margin:0 -13px!important;padding:max(8px,env(safe-area-inset-top)) 13px 8px!important;gap:9px}
.navbar>.container{min-height:62px!important}
.brand,.navbar-brand{gap:9px;color:#fff7d7!important}
.brand-badge,.navbar-brand .brand-badge{
  width:42px!important;height:42px!important;flex:0 0 42px;border-radius:13px!important;
  background:linear-gradient(135deg,#fff7cf,#f6d65f 52%,#d39c10)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.brand-logo{width:108%;height:108%}
.brand-text strong,.brand-title strong{color:#fff7d7!important;font-size:.9rem!important;font-weight:900!important;letter-spacing:.03em!important}
.brand-text small,.brand-title small{color:rgba(255,255,255,.82)!important;font-size:.66rem!important;font-weight:800!important}
.top-actions{gap:7px!important}
.round-action{
  width:39px!important;height:39px!important;border-radius:13px!important;
  color:#fff!important;background:rgba(255,255,255,.11)!important;
  border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;
}
.round-action.gold{color:#2d2100!important;background:linear-gradient(135deg,#fff8d6,#f4d15d 65%,#dda817)!important;border-color:rgba(255,245,193,.55)!important}
.round-action:hover,.round-action:focus-visible{background:rgba(255,255,255,.18)!important}

/* Shared cards */
.profile-widget,.hero-widget,.filter-widget,.form-widget,.hint-widget,.bill-card,.customer-card,.payment-card,.empty-widget,.top-search-widget{
  color:var(--agent-ink)!important;
  background:#fff!important;
  border:1px solid var(--agent-line)!important;
  box-shadow:var(--agent-shadow-soft)!important;
  backdrop-filter:none!important;
}
.profile-widget,.hero-widget{margin-top:13px!important;border-radius:22px!important;padding:13px!important}
.profile-head,.hero-head{gap:11px!important}
.avatar-icon,.hero-icon{
  width:49px!important;height:49px!important;flex:0 0 49px!important;border-radius:16px!important;font-size:1.35rem!important;
  box-shadow:0 7px 16px rgba(12,38,76,.15),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.profile-name,.hero-title{color:#122f58!important;font-size:1.04rem!important;line-height:1.22!important;font-weight:900!important}
.profile-sub,.hero-sub{margin-top:3px!important;color:#536986!important;font-size:.77rem!important;line-height:1.38!important;font-weight:750!important}
.mini-info{gap:7px!important;margin-top:10px!important}
.mini-pill{padding:8px 9px!important;border-radius:12px!important;color:#344f72!important;background:#f3f7fc!important;border:1px solid #d6e2f0!important;font-size:.73rem!important;font-weight:850!important}
.mini-pill i{color:#9c6c00!important}
.section-label{margin:15px 3px 8px!important;color:#455e80!important;font-size:.8rem!important;font-weight:900!important;letter-spacing:.01em}

/* Home icon grid */
.app-grid{column-gap:10px!important;row-gap:16px!important}
.app-tile{gap:7px!important;color:var(--agent-ink)!important}
.app-icon{width:60px!important;height:60px!important;border-radius:19px!important;font-size:1.45rem!important;box-shadow:0 10px 20px rgba(12,38,76,.17),inset 0 1px 0 rgba(255,255,255,.5)!important}
.app-label{max-width:80px!important;color:#223d61!important;font-size:.74rem!important;line-height:1.18!important;font-weight:900!important}

/* KPI / meta */
.stat-grid{gap:7px!important;margin-top:10px!important}
.stat-box,.meta-box{
  padding:9px 10px!important;border-radius:13px!important;
  background:#f4f8fd!important;border:1px solid #d5e1ef!important;
}
.stat-label,.meta-label{color:#5c708c!important;font-size:.67rem!important;font-weight:850!important}
.stat-value,.meta-value{margin-top:2px!important;color:#122f58!important;font-size:.9rem!important;font-weight:900!important;line-height:1.12!important}
.stat-value.gold,.money-gold,.text-gold{color:#8b5d00!important}
.stat-value.success,.text-success{color:var(--agent-success)!important}
.stat-value.muted,.text-muted{color:#5d708b!important}

/* Specific KPI readability: avoid pale green/grey values */
.hero-widget .stat-box:nth-child(3) .stat-value,.profile-widget .stat-box:nth-child(3) .stat-value{color:var(--agent-success)!important}
.hero-widget .stat-box:nth-child(4) .stat-value,.profile-widget .stat-box:nth-child(4) .stat-value{color:#344f72!important}

/* Search */
.top-search-widget{margin-top:11px!important;padding:7px!important;border-radius:18px!important}
.search-pill-form{min-height:46px!important;border-radius:14px!important;background:#fff!important;border:1px solid var(--agent-line-strong)!important;box-shadow:0 2px 5px rgba(15,44,83,.04)!important}
.search-pill-icon{font-size:.95rem!important;color:#55708f!important}
.search-pill-input{height:44px!important;color:#17375f!important;font-size:.84rem!important;font-weight:800!important}
.search-pill-input::placeholder{color:#8292a8!important;opacity:1!important}
.search-pill-reset,.search-pill-submit{width:36px!important;height:36px!important;border-radius:11px!important}
.search-pill-submit{color:#291d00!important;background:linear-gradient(135deg,#fff5c8,#f2cb4c,#d7a117)!important;box-shadow:0 5px 12px rgba(170,120,0,.18)!important}

/* List cards */
.bill-list,.customer-list,.payment-list{gap:10px!important}
.bill-card,.customer-card,.payment-card{border-radius:19px!important;padding:11px!important}
.bill-card:hover,.customer-card:hover,.payment-card:hover{border-color:#b9cde4!important;box-shadow:0 10px 24px rgba(12,38,76,.13)!important}
.bill-top,.customer-top,.payment-top{gap:9px!important}
.bill-icon,.customer-icon,.payment-icon{width:43px!important;height:43px!important;flex:0 0 43px!important;border-radius:14px!important;font-size:1.08rem!important;box-shadow:0 7px 15px rgba(12,38,76,.16)!important}
.bill-no,.customer-name,.payment-title{color:#102f59!important;font-size:.91rem!important;line-height:1.22!important;font-weight:900!important}
.bill-sub,.customer-sub,.payment-sub{margin-top:2px!important;color:#526b89!important;font-size:.71rem!important;line-height:1.35!important;font-weight:750!important}
.money-badge,.amount-badge{padding:7px 9px!important;border-radius:11px!important;color:#2b2100!important;background:#fff2b5!important;border:1px solid #ebd06a!important;font-size:.74rem!important;font-weight:900!important;box-shadow:none!important;white-space:nowrap}
.bill-meta,.customer-meta{gap:6px!important;margin-top:9px!important}
.bill-meta .meta-box,.customer-meta .meta-box{background:#f4f8fd!important;border-color:#d5e1ef!important}
.bill-meta .meta-label,.customer-meta .meta-label{color:#5b708c!important}
.bill-meta .meta-value,.customer-meta .meta-value{color:#17375f!important;font-size:.79rem!important}
.media-grid{gap:8px!important;margin-top:9px!important}
.media-box,.note-box{border-radius:13px!important;padding:9px!important;background:#f4f8fd!important;border:1px solid #d6e2ef!important}
.media-label{color:#536a87!important;font-size:.68rem!important;font-weight:800!important}
.media-frame,.signature-frame{border-radius:11px!important}
.empty-widget{border-radius:19px!important;padding:20px 14px!important;color:#536a87!important}
.empty-widget i{font-size:1.6rem!important;color:#6f85a2!important}

/* Forms */
.form-widget{border-radius:20px!important;padding:13px!important}
.field{margin-bottom:11px!important}
.field-label,.form-label{margin-bottom:6px!important;color:#425c7c!important;font-size:.77rem!important;font-weight:900!important}
.password-row{min-height:50px!important;padding:0 8px 0 12px!important;border-radius:14px!important;background:#fff!important;border:1px solid var(--agent-line-strong)!important;box-shadow:none!important}
.password-row i{font-size:1rem!important;color:#566f8e!important}
.password-input{height:44px!important;color:#17375f!important;font-size:.89rem!important;font-weight:800!important}
.toggle-pass{width:35px!important;height:35px!important;border-radius:10px!important}
.btn-submit{min-height:48px!important;border-radius:14px!important;font-size:.86rem!important;font-weight:900!important;box-shadow:0 8px 17px rgba(181,132,15,.18)!important}
.hint-widget{border-radius:16px!important;padding:11px!important;color:#604c13!important;background:#fffaf0!important;border-color:#e7d79d!important;font-size:.74rem!important}

/* Pagination */
.pager{gap:6px!important;margin-top:13px!important}
.page-btn{min-width:35px!important;height:35px!important;padding:0 9px!important;border-radius:11px!important;color:#334e70!important;background:#fff!important;border:1px solid var(--agent-line-strong)!important;box-shadow:none!important;font-size:.73rem!important;font-weight:850!important}
.page-btn.active{color:#291e00!important;background:linear-gradient(135deg,#fff5c9,#f2ce55,#d7a418)!important;border-color:#d9b84c!important}

/* Bottom dock */
.dock-wrap{padding-top:15px!important}
.dock{gap:7px!important;padding:8px 10px!important;border-radius:21px!important;border:1px solid #cedceb!important;background:rgba(255,255,255,.98)!important;box-shadow:0 10px 28px rgba(12,38,76,.16)!important;backdrop-filter:blur(10px)!important}
.dock-tile{gap:5px!important;color:#3e5879!important;font-size:.67rem!important;font-weight:900!important}
.dock-icon,.dock .app-icon{width:47px!important;height:47px!important;border-radius:15px!important;font-size:1.16rem!important;box-shadow:0 7px 15px rgba(12,38,76,.16),inset 0 1px 0 rgba(255,255,255,.42)!important}

/* Generic bootstrap/legacy helpers that were too pale */
.small,.small-text{color:#536a87}
.form-control,.form-select{color:#17375f!important;border-color:var(--agent-line-strong)!important}
.form-control::placeholder{color:#8393a9!important;opacity:1!important}
.badge.text-bg-light,.bg-light{color:#294666!important}

/* Login */
.login-card,.login-widget,.auth-card{background:#fff!important;border:1px solid var(--agent-line)!important;box-shadow:var(--agent-shadow)!important}
.brand-title{line-height:1.03!important}

@media (min-width:768px){
  .phone-page{width:min(100%,560px)!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}