/* Reseller workspace: the admin's layout (portal.css + admin.css) with a dashboard, a device table and
   a playlist panel. Only what the admin does not have yet is here. */
body.reseller.signed-out{display:block;height:auto;overflow:auto}
.login-lang{display:flex;justify-content:center;margin-top:18px}
.login-lang select{width:auto}

.nav-count{margin-left:auto;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11.5px;line-height:18px;color:var(--muted)}
.nav-count:empty{display:none}
body.reseller .nav button{position:relative}
body.reseller .nav button.active::after{display:none}  /* the active entry is already lit; its dot would sit on the count */


/* Top bar: the language list sits before the account icon (portal.css puts .compact last) */
body.reseller .top-lang{order:0;margin-left:0;width:auto;height:32px;font-size:12.5px;padding:0 28px 0 10px}  /* portal.css puts .compact last; here the account icon is last */

/* Key figures: four, the two that point at work act as filters */
.reseller-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
body.admin .kpi.link.on{border-color:rgba(138,120,255,.7);background:rgba(91,124,255,.12)}
body.reseller .tv-card .toolbar{flex-wrap:wrap}
body.reseller .data-table tr.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.reseller .data-table td .sub{display:block;color:var(--faint);font-size:11.5px;font-family:var(--font)}

/* Playlists in the side panel */
.playlist-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.playlist-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.playlist-main .sub{margin-top:3px;color:var(--faint);font-size:12.5px;overflow-wrap:anywhere}
.playlist-actions{display:flex;flex-wrap:wrap;gap:6px}
.playlist-row.locked .playlist-title strong{color:var(--muted)}
.drawer-empty{padding:18px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);text-align:center}
.drawer-empty p{margin:0 0 10px;color:var(--muted)}
body.reseller .danger-text{color:var(--bad)}
body.reseller .drawer-body > .small{margin:0 0 4px}

/* Add TVs */
#add-done{margin-top:16px}
#add-done h3{margin:0 0 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
#add-done .mini-row .small{color:var(--ok)}
#pl-tv{margin:0 0 4px;color:var(--faint)}

@media (max-width:1000px){ .reseller-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Phone: the add button keeps only its plus, so the language and the account icon still fit beside it. */
@media (max-width:520px){
  body.reseller #top-add span:last-child{display:none}
  body.reseller #top-add{width:34px;padding:0;justify-content:center;font-size:18px}
  body.reseller #top-add span[aria-hidden]{margin:0}
}
@media (max-width:900px){
  body.reseller .topbar{height:auto;min-height:60px;flex-wrap:wrap;row-gap:10px;padding:10px 0}
}

.bundles-card{margin-top:12px}
.bundles-table .total-row td{font-weight:650;border-top:1px solid var(--line-2)}

/* Dashboard: two cards side by side; My devices: the table uses the full height of the page */
.dash-grid{margin-top:12px}
.dash-grid .card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dash-grid .card-head .button{flex:none;text-decoration:none}
body.reseller .devices-card .table-wrap{max-height:none;overflow-x:auto}

@media (min-width:901px){
  body.sidebar-collapsed .nav-count{position:absolute;top:-5px;right:-7px;margin:0;padding:0 5px;min-width:18px;text-align:center;font-size:10px;line-height:16px;background:#5b5ff0;color:#fff;box-shadow:0 0 0 2px var(--bg-2)}
}
/* Phone: the menu buttons take the width they need and wrap, so the device count never runs into the next one */
@media (max-width:900px){ body.reseller.workspace .nav button{flex:1 1 auto;min-width:0;white-space:nowrap} }
body.reseller .devices-card{margin-top:4px}
/* Taking a device off the list: at the bottom of its panel, apart from the rest */
.remove-row{margin-top:22px}

/* Sign-in: a starry sky (CC0, Wikimedia Commons "A Sky Full Of Stars") over the whole page, a soft dark glow behind the centred card */
body.reseller .reseller-login{justify-content:center;padding:96px 24px 80px;
  background:radial-gradient(620px 460px at 50% 46%,rgba(5,7,16,.55),transparent 72%),
             radial-gradient(760px 520px at 50% 46%,rgba(110,90,255,.16),transparent 70%),
             linear-gradient(180deg,rgba(5,7,16,.20),rgba(5,7,16,.35)),
             url('/img/reseller-login.jpg') 50% 60% / cover no-repeat,#05070f}
body.reseller .reseller-login::before,body.reseller .reseller-login::after{display:none}
body.reseller .reseller-login .admin-login-card{max-width:400px;width:100%;background:rgba(14,16,32,.34);border-color:rgba(210,200,255,.22);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
/* The fields and the language list are glass too, so the sky shows through the whole card */
body.reseller .reseller-login .admin-login-card input,body.reseller .reseller-login .admin-login-card select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.reseller .reseller-login .admin-login-card input:focus{background:rgba(255,255,255,.10)}
.reseller-login .admin-login-card .brand small{color:#c9cfe0}
.reseller-login .admin-login-card h1{font-size:26px;letter-spacing:-.025em}
.login-photo-brand{position:absolute;top:32px;left:clamp(24px,4vw,56px);display:flex;align-items:center;gap:12px;font-size:20px;font-weight:750;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.login-photo-brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.login-photo-platforms{position:absolute;bottom:32px;left:clamp(24px,4vw,56px);display:flex;flex-wrap:wrap;gap:8px}
.login-photo-platforms span{padding:6px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(10,12,24,.35);color:#dfe4f2;font-size:12.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:900px){
  body.reseller .reseller-login{justify-content:center;padding:96px 16px 32px;background-position:40% 50%}
  .login-photo-brand{left:50%;transform:translateX(-50%);top:28px}
  .login-photo-platforms{display:none}
}
/* The brand is already top left on the photo; the card starts with the welcome */
body.reseller .reseller-login .admin-login-card .brand{display:none}