/* VerifY R7 FIX153 premium finish (same file in Operations, Trial Demo, Master Admin and Client Portal).
   Visual only: shading, depth, hover/press feedback and focus rings. It never changes layout, sizes, border widths,
   visibility or colours of a button variant, so every screen keeps working exactly as before. Loaded last. */
:root{--vp-navy:7,26,59;--vp-gold:201,157,45;--vp-ease:cubic-bezier(.2,.7,.2,1)}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Buttons: soft top light, layered drop shadow, lift on hover, press on click */
.btn,.role-enter,.nav-btn,.mode-chip,.storage-tab,button.close,.close-btn,.modal-close{transition:transform .14s var(--vp-ease),box-shadow .18s var(--vp-ease),filter .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease!important}
.btn:not(.secondary):not(.ghost):not(.link):not(.text){box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.10),0 1px 2px rgba(var(--vp-navy),.16),0 6px 14px -6px rgba(var(--vp-navy),.38)!important}
.btn.secondary,.btn.ghost{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(var(--vp-navy),.07),0 4px 10px -5px rgba(var(--vp-navy),.18)!important}
.btn.gold{box-shadow:inset 0 1px 0 rgba(255,246,214,.55),inset 0 -1px 0 rgba(120,84,0,.18),0 1px 2px rgba(120,84,0,.18),0 6px 16px -6px rgba(185,137,22,.55)!important}
@media (hover:hover){
 .btn:not(:disabled):not([aria-disabled="true"]):hover{transform:translateY(-1px);filter:brightness(1.04) saturate(1.04)}
 .btn:not(.secondary):not(.ghost):not(:disabled):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.10),0 2px 4px rgba(var(--vp-navy),.16),0 12px 22px -8px rgba(var(--vp-navy),.42)!important}
 .btn.secondary:not(:disabled):hover,.btn.ghost:not(:disabled):hover{box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(var(--vp-navy),.08),0 10px 20px -8px rgba(var(--vp-navy),.24)!important}
 .btn.gold:not(:disabled):hover{box-shadow:inset 0 1px 0 rgba(255,246,214,.6),0 2px 4px rgba(120,84,0,.18),0 12px 24px -8px rgba(185,137,22,.6)!important}
}
.btn:not(:disabled):active{transform:translateY(0) scale(.985);filter:brightness(.98)}
.btn:not(.secondary):not(.ghost):not(:disabled):active{box-shadow:inset 0 2px 6px rgba(0,0,0,.22),0 1px 1px rgba(var(--vp-navy),.12)!important}
.btn.secondary:not(:disabled):active,.btn.ghost:not(:disabled):active{box-shadow:inset 0 2px 5px rgba(var(--vp-navy),.12)!important}
.btn:disabled,.btn[aria-disabled="true"]{transform:none!important;filter:grayscale(.15)!important}
.btn:focus-visible,.role-enter:focus-visible,.nav-btn:focus-visible,.mode-chip:focus-visible,.close-btn:focus-visible,.modal-close:focus-visible,button.close:focus-visible{outline:3px solid rgba(var(--vp-gold),.85)!important;outline-offset:2px!important}

/* Cards, panels and dialogs: crisp edge plus a soft two-layer shadow for depth */
.panel,.metric-card,.setting-card,.stat,.export-box{box-shadow:0 1px 2px rgba(var(--vp-navy),.05),0 8px 24px -14px rgba(var(--vp-navy),.22)}
.modal{box-shadow:0 2px 6px rgba(var(--vp-navy),.10),0 30px 70px -20px rgba(var(--vp-navy),.55),inset 0 1px 0 rgba(255,255,255,.7)!important}
.modal-bg,.modal-backdrop{-webkit-backdrop-filter:blur(4px) saturate(1.1);backdrop-filter:blur(4px) saturate(1.1)}
@media (hover:hover){.metric-card,.stat{transition:transform .18s var(--vp-ease),box-shadow .18s var(--vp-ease)}.metric-card:hover,.stat:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(var(--vp-navy),.06),0 14px 30px -14px rgba(var(--vp-navy),.30)}}

/* Inputs: gentle inner shade and a clear gold focus ring */
.input,.select,.textarea,input[type=text],input[type=password],input[type=email],input[type=search],input[type=number],input[type=date],input[type=time],input[type=tel],select,textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.input,.select,.textarea{box-shadow:inset 0 1px 2px rgba(var(--vp-navy),.07)}
.input:focus,.select:focus,.textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:inset 0 1px 2px rgba(var(--vp-navy),.06),0 0 0 4px rgba(var(--vp-gold),.22)!important}

/* Tables: tinted header and row hover */
.table thead th,.table-wrap thead th{background-image:linear-gradient(180deg,rgba(var(--vp-navy),.035),rgba(var(--vp-navy),.07))}
@media (hover:hover){.table tbody tr,.table-wrap tbody tr{transition:background-color .12s ease}.table tbody tr:hover>td,.table-wrap tbody tr:hover>td{background-color:rgba(var(--vp-gold),.07)}}

/* Chips and badges: small raised pill */
.chip,.badge,.nav-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(var(--vp-navy),.10)}

@media (prefers-reduced-motion:reduce){.btn,.metric-card,.stat,.role-enter,.nav-btn{transition:none!important}.btn:hover,.btn:active,.metric-card:hover,.stat:hover{transform:none!important}}

/* ===== FIX155 bold premium look (approved by Sammie 2026-11-11) ===== */
:root{--vb-navy-1:#1d4a8a;--vb-navy-2:#0d2a57;--vb-navy-3:#08203f;--vb-gold-1:#f2cf6b;--vb-gold-2:#c9971f;--vb-gold-3:#9c7110;--vb-line:#d3deeb;--vb-ink:#0b2246}
/* Primary / default buttons: deep navy gradient with a thin gold underline */
.btn:not(.secondary):not(.ghost):not(.gold):not(.danger):not(.warn):not(.success):not(.link):not(.text),.btn.primary,.btn.dark,.btn.blue{background:linear-gradient(180deg,var(--vb-navy-1) 0%,var(--vb-navy-2) 58%,var(--vb-navy-3) 100%)!important;color:#fff!important;border:1px solid #061a36!important;border-radius:12px!important;letter-spacing:.015em;text-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(201,151,31,.85),0 2px 4px rgba(7,26,59,.18),0 10px 20px -8px rgba(7,26,59,.45)!important}
/* Gold call-to-action buttons */
.btn.gold{background:linear-gradient(180deg,var(--vb-gold-1) 0%,#dfb243 45%,var(--vb-gold-2) 100%)!important;color:#1d1503!important;border:1px solid var(--vb-gold-3)!important;border-radius:12px!important;text-shadow:0 1px 0 rgba(255,240,200,.55);box-shadow:inset 0 1px 0 rgba(255,250,230,.75),inset 0 -2px 0 rgba(120,84,0,.25),0 2px 4px rgba(120,84,0,.2),0 10px 22px -8px rgba(185,137,22,.6)!important}
/* Secondary buttons: white with a navy edge and a soft silver gradient */
.btn.secondary,.btn.ghost{background:linear-gradient(180deg,#ffffff 0%,#f3f6fb 100%)!important;color:var(--vb-ink)!important;border:1.5px solid #9fb3cf!important;border-radius:12px!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(7,26,59,.08),0 6px 14px -8px rgba(7,26,59,.28)!important}
@media (hover:hover){.btn.secondary:not(:disabled):hover,.btn.ghost:not(:disabled):hover{border-color:var(--vb-navy-2)!important;color:var(--vb-navy-2)!important}}
/* Danger keeps red, made richer */
.btn.danger{background:linear-gradient(180deg,#e0483a,#b4231a)!important;color:#fff!important;border:1px solid #8f1a13!important;border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -8px rgba(180,35,26,.6)!important}
.btn.success{background:linear-gradient(180deg,#2fa66a,#1c7a4b)!important;color:#fff!important;border:1px solid #155c38!important;border-radius:12px!important}
.btn.warn{background:linear-gradient(180deg,#f6b543,#d98a0c)!important;color:#2a1700!important;border:1px solid #b06f07!important;border-radius:12px!important}
/* Cards and panels: crisp hairline edge, rounder corners, gold accent line on top, deeper soft shadow */
.panel,.setting-card,.metric-card,.card:not(.role-btn),.stat,.acp-block{border-color:var(--vb-line)!important;border-radius:16px!important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 3px rgba(7,26,59,.06),0 18px 40px -22px rgba(7,26,59,.38)!important}
.panel,.setting-card{position:relative}
.panel::before,.setting-card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--vb-gold-2) 18%,var(--vb-gold-1) 50%,var(--vb-gold-2) 82%,transparent);pointer-events:none}
.metric-card{background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%)!important}
/* Dialogs */
.modal,.acp-dialog{border-radius:20px!important;border:1px solid var(--vb-line)!important;border-top:4px solid var(--vb-gold-2)!important}
/* Inputs: rounder, crisp navy focus with gold glow */
.input,.select,.textarea{border-radius:12px!important}
.input:focus,.select:focus,.textarea:focus{border-color:var(--vb-navy-2)!important}
/* Chips and badges: pill shape with a fine edge */
.chip,.badge{border-radius:999px!important}
/* Sidebar nav (Master Admin): gold active marker */
.nav-btn.active{box-shadow:inset 3px 0 0 var(--vb-gold-2),0 6px 16px -10px rgba(0,0,0,.6)!important}
