/* Screenloop CMS - Stylesheet */
:root {
  --bg0:#0a0b10; --bg1:#111219; --bg2:#191a24; --bg3:#222431;
  --bgh:#2a2c3d; --border:rgba(255,255,255,.06); --borderh:rgba(255,255,255,.12);
  --t0:#fff; --t1:#c8c9d2; --t2:#8b8d9e; --t3:#5c5e72;
  --accent:#6366f1; --accenth:#818cf8; --accentbg:rgba(99,102,241,.12);
  --green:#22c55e; --greenbg:rgba(34,197,94,.12);
  --red:#ef4444; --redbg:rgba(239,68,68,.12);
  --amber:#f59e0b; --amberbg:rgba(245,158,11,.12);
  --teal:#14b8a6;
  --r:10px; --rl:14px;
  --font:'DM Sans',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --tr:.2s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--bg0);color:var(--t1);min-height:100vh}
a{color:inherit;text-decoration:none}

/* LOGIN */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg0)}
.login-card{width:380px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:36px}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.login-logo span{font-size:20px;font-weight:700;color:var(--t0)}
.login-sub{font-size:13px;color:var(--t3);margin-bottom:24px}
.login-error{background:var(--redbg);color:var(--red);padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.logo-box{width:42px;height:42px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff}
.logo-box.sm{width:32px;height:32px;font-size:16px;border-radius:8px}

/* FORM */
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--t0);font-size:13px;font-family:var(--font);transition:border var(--tr)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:80px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8d9e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--t1);transition:all var(--tr);white-space:nowrap}
.btn:hover{background:var(--bg3);border-color:var(--borderh)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accenth)}
.btn.danger{background:var(--redbg);border-color:transparent;color:var(--red)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.full{width:100%;justify-content:center;padding:10px}
.btn.icon{padding:7px;width:34px;height:34px;justify-content:center}

/* LAYOUT */
.app{display:flex;min-height:100vh}
.sidebar{width:250px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform var(--tr)}
.sidebar-logo{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar-logo strong{font-size:15px;color:var(--t0)}
.version{font-size:10px;color:var(--t3);font-family:var(--mono);display:block;margin-top:1px}
.sidebar-nav{flex:1;padding:10px;overflow-y:auto}
.nav-group-label{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--t3);padding:14px 12px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--t2);transition:all var(--tr);position:relative}
.nav-item:hover{background:var(--bgh);color:var(--t1)}
.nav-item.active{background:var(--accentbg);color:var(--accenth)}

.nav-item.active::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item i{font-style:normal;font-size:15px;width:20px;text-align:center}
.nav-item b{margin-left:auto;background:var(--accentbg);color:var(--accent);font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;font-family:var(--mono)}
.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.tenant-pill{padding:8px 10px;background:var(--bg2);border-radius:8px;font-size:12px;color:var(--t2);margin-bottom:8px}
.main{margin-left:250px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:12px;background:var(--bg1);position:sticky;top:0;z-index:50}
.topbar h1{font-size:15px;font-weight:600;color:var(--t0);flex:1}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hamburger{display:none;background:none;border:none;color:var(--t1);font-size:20px;cursor:pointer}
.user-badge{font-size:12px;color:var(--t2);background:var(--bg2);padding:5px 12px;border-radius:6px}
.content{flex:1;padding:24px}

/* CARDS & STATS */
.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border var(--tr)}
.card:hover{border-color:var(--borderh)}
.card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-head h3{font-size:13px;font-weight:600;color:var(--t0)}
.card-body{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:18px}
.stat-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.stat-val{font-size:26px;font-weight:700;color:var(--t0);letter-spacing:-1px;font-family:var(--mono)}
.stat-sub{font-size:11.5px;margin-top:4px;color:var(--t3)}
.stat-sub.up{color:var(--green)}.stat-sub.down{color:var(--red)}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 14px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--t3);border-bottom:1px solid var(--border)}
td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--t1)}
tr:hover td{background:var(--bg2)}
tr:last-child td{border-bottom:none}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:500}
.badge.green{background:var(--greenbg);color:var(--green)}
.badge.red{background:var(--redbg);color:var(--red)}
.badge.amber{background:var(--amberbg);color:var(--amber)}
.badge.accent{background:var(--accentbg);color:var(--accenth)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot.green{background:var(--green)}.dot.red{background:var(--red)}.dot.amber{background:var(--amber)}

/* LIST ITEMS */
.list-item{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr)}
.list-item:hover{background:var(--bg2)}
.list-item:last-child{border-bottom:none}
.list-item .thumb{width:72px;height:40px;background:var(--bg3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.list-item .info{flex:1;min-width:0}
.list-item .info h4{font-size:13.5px;font-weight:500;color:var(--t0);margin-bottom:2px}
.list-item .info .meta{font-size:11.5px;color:var(--t3);display:flex;gap:10px}
.list-item .actions{display:flex;gap:5px;opacity:0;transition:opacity var(--tr)}
.list-item:hover .actions{opacity:1}

/* SLIDE GRID */
.slide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.slide-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all var(--tr)}
.slide-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.slide-card .preview{aspect-ratio:16/9;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:28px;position:relative}
.slide-card .preview .type-badge{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:2px 6px;border-radius:4px;font-size:9.5px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.4px}
.slide-card .card-info{padding:9px 11px}
.slide-card .card-info h4{font-size:12px;font-weight:500;color:var(--t0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-card .card-info .meta{font-size:10.5px;color:var(--t3);margin-top:2px}
/* Slide action circles */
.slide-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.slide-card:hover .slide-actions{opacity:1}
.sc-btn{width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sc-btn:hover{transform:scale(1.15)}
.sc-del{background:#ef4444}.sc-del:hover{background:#dc2626}
.sc-edit{background:#22c55e}.sc-edit:hover{background:#16a34a}
.sc-fav{background:#eab308}.sc-fav:hover{background:#ca8a04}
.sc-fav.on{background:#eab308;box-shadow:0 0 8px rgba(234,179,8,.5)}
.sc-btn svg{width:12px;height:12px;fill:#fff;pointer-events:none}

/* SCREEN CARDS */
.screen-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:18px;transition:border var(--tr)}
.screen-card:hover{border-color:var(--borderh)}
.screen-card .sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.screen-card .sc-name{font-size:14px;font-weight:600;color:var(--t0)}
.screen-card .sc-loc{font-size:11.5px;color:var(--t3)}
.screen-card .sc-preview{background:var(--bg2);border-radius:8px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:12px;color:var(--t3)}
.screen-card .sc-detail{display:flex;justify-content:space-between;font-size:11px;color:var(--t2);padding-top:10px;border-top:1px solid var(--border)}
.screen-card .sc-actions{display:flex;gap:6px;margin-top:10px}
.screen-card .sc-actions .btn{flex:1}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity var(--tr)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);width:500px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--t0)}
.close-btn{background:none;border:none;color:var(--t2);font-size:18px;cursor:pointer}
.modal-body{padding:22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* EMPTY STATE */
.empty{text-align:center;padding:50px 20px;color:var(--t3)}
.empty .icon{font-size:40px;margin-bottom:14px;opacity:.5}
.empty h3{font-size:15px;color:var(--t2);margin-bottom:6px}
.empty p{font-size:12.5px;max-width:280px;margin:0 auto 16px}

/* PAGE HEADER */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-head h2{font-size:20px;font-weight:600;color:var(--t0);letter-spacing:-.4px}
.page-head .sub{font-size:12.5px;color:var(--t2);margin-top:2px}

/* BAR CHART */
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:16px}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.bar-chart .bar-val{font-size:10px;color:var(--t2);font-family:var(--mono)}
.bar-chart .bar{width:100%;border-radius:3px 3px 0 0;min-height:3px;transition:height .6s ease}
.bar-chart .bar-label{font-size:10px;color:var(--t3)}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .35s ease both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}

/* RESPONSIVE */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:block}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}.content{padding:16px}}

/* TOUCH DEVICES (iPad, phones) — bigger targets, always-visible actions */
@media(pointer:coarse){
  .nav-item{min-height:44px;padding:10px 16px !important;font-size:13px}
  .btn,.btn-sm{min-height:44px;padding:8px 14px;font-size:12px}
  .list-item{padding:14px 18px;min-height:52px}
  .list-item .actions{opacity:1 !important}
  .slide-card .slide-actions{opacity:1 !important}
  .sc-btn{width:32px !important;height:32px !important;font-size:14px !important}
  select,input[type="text"],input[type="number"],input[type="email"],input[type="password"]{min-height:40px;font-size:14px !important}
  .badge{padding:4px 8px;font-size:10px !important}
  td,th{padding:12px 14px}
  .hamburger{min-height:44px;min-width:44px}
  .modal-box,.cv-modal-box{max-height:95vh !important}
  /* Prevent 300ms tap delay */
  a,button,.nav-item,.list-item,.slide-card,.tbtn,.picker-item{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}