:root{
  --sidebar:#1f2d33;
  --sidebar-2:#172329;
  --topbar:#3d8fbd;
  --topbar-dark:#2e7da8;
  --blue:#0aa8d6;
  --blue-dark:#087fa5;
  --green:#08a65a;
  --green-dark:#078b4c;
  --yellow:#ffc107;
  --yellow-dark:#e0a800;
  --red:#e74c3c;
  --red-dark:#cf3f32;
  --page:#f2f4f6;
  --border:#e3e7ea;
  --text:#263238;
  --muted:#6b7b83;
  --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--page);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}

/* LOGIN */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#1f2d33,#3d8fbd)}
.login-box{width:min(440px,100%);background:#fff;padding:34px;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.login-logo{text-align:center;margin-bottom:26px}
.login-logo .icon{font-size:44px;margin-bottom:8px}
.login-logo h1{font-size:25px}
.login-logo p{color:var(--muted);margin-top:8px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice a{display:block;text-decoration:none;text-align:center;padding:14px;border-radius:3px;background:var(--blue);color:#fff;font-weight:700}
.choice a.secondary{background:var(--sidebar)}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:7px;font-weight:700}
.form-group input,.form-group select{width:100%;padding:11px 12px;border:1px solid #ccd4d9;border-radius:3px;background:#fff}
.login-button,.primary-button{border:0;border-radius:3px;background:var(--blue);color:#fff;font-weight:700;padding:11px 16px}
.login-button{width:100%}
.login-button:hover,.primary-button:hover{background:var(--blue-dark)}
.secondary-button{border:1px solid #c9d2d7;border-radius:3px;background:#fff;color:#455a64;padding:10px 14px;font-weight:700}
.login-message{text-align:center;color:var(--red);margin-top:14px}
.demo-info{margin-top:18px;padding:11px;background:#eaf7fb;border-left:3px solid var(--blue);font-size:13px;color:#24637a}

/* APP LAYOUT */
.app{display:none;min-height:100vh}
.layout{display:flex;min-height:100vh}
.sidebar{width:235px;flex:0 0 235px;background:var(--sidebar);color:#d9e1e5;min-height:100vh;position:sticky;top:0;align-self:flex-start}
.logo{height:58px;display:flex;align-items:center;padding:0 18px;background:var(--topbar);color:#fff;font-size:17px;font-weight:700;letter-spacing:.3px}
.menu{list-style:none;padding:10px 0 22px}
.menu li{margin:0}
.menu button{width:100%;border:0;background:transparent;color:#c9d2d7;text-align:left;padding:11px 18px;border-left:3px solid transparent;border-radius:0;font-size:14px;transition:.15s}
.menu button:hover{background:var(--sidebar-2);color:#fff}
.menu button.active{background:#24383f;color:#fff;border-left-color:var(--blue)}
.menu button.active::after{content:"";float:right;margin-top:5px;border:4px solid transparent;border-right:0;border-left-color:#fff}

/* CONTENT + TOPBAR */
.content{flex:1;min-width:0;padding:0;background:var(--page)}
.topbar{min-height:58px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;background:var(--topbar);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.topbar h1{font-size:19px;font-weight:700;color:#fff}
.topbar p{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px}
.user{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:3px;color:#fff;font-size:13px}
#pageContent{padding:18px}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:#fff;border-radius:2px;overflow:hidden;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.07);padding:18px}
.card-title{color:#60727b;font-size:13px;margin-bottom:8px}
.card-value{font-size:24px;font-weight:700;color:#263238}
.card .card-title:first-letter{font-weight:700}
.green{color:#08a65a!important}.red{color:#e74c3c!important}.orange{color:#d97706!important}

/* Dashboard colored cards only */
.admin-dashboard #pageContent .cards .card{border:0;color:#fff;min-height:110px;position:relative}
.admin-dashboard #pageContent .cards .card:nth-child(1){background:var(--green)}
.admin-dashboard #pageContent .cards .card:nth-child(2){background:var(--yellow);color:#263238}
.admin-dashboard #pageContent .cards .card:nth-child(3){background:#159bb4}
.admin-dashboard #pageContent .cards .card:nth-child(4){background:var(--red)}
.admin-dashboard #pageContent .cards .card .card-title,
.admin-dashboard #pageContent .cards .card .card-value{color:inherit}
.admin-dashboard #pageContent .cards .card::after{content:"";position:absolute;right:18px;bottom:15px;width:46px;height:46px;border:4px solid currentColor;border-radius:50%;opacity:.12}

/* PANELS */
.panel{background:#fff;border:1px solid var(--border);border-top:3px solid var(--blue);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:18px;margin-bottom:18px}
.panel h2{font-size:17px;margin-bottom:12px;color:#263238}
.panel p{line-height:1.55;color:#5f7078}

/* TABLES */
.table-container{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;white-space:nowrap}
th{color:#4d6069;font-size:12px;text-transform:none;background:#fafbfc}
tbody tr:hover{background:#f6fafc}
.empty{text-align:center;color:#7a8a92;padding:24px}

/* BUTTONS */
.action-button{border:0;padding:7px 10px;border-radius:3px;cursor:pointer;margin-right:4px}
.edit{background:#e4f2f8;color:#087fa5}.delete{background:#fde8e6;color:#b83227}
.save-button{margin-top:18px;width:auto;padding:11px 22px}

/* FORMS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input,select,textarea{outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(10,168,214,.12)}

/* FINANCE / MODALS */
.finance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.finance-item{background:#f8fafb;border:1px solid var(--border);border-radius:3px;padding:15px;display:flex;justify-content:space-between;gap:10px}
.finance-item b{font-size:18px}
.notification-item{display:flex;justify-content:space-between;gap:20px;align-items:center}
.notification-item p{margin:6px 0 0;color:#64748b}
.notification-item>span,.notification-item>div:last-child>span{color:#64748b;font-size:13px}
.notification-item.read{opacity:.75}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal-card{width:min(680px,100%);background:#fff;border-radius:3px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.modal-header h2{margin:0}.modal-header p{margin:5px 0 0;color:#64748b}
.modal-close{border:0;background:#f1f5f9;border-radius:3px;padding:8px 12px;cursor:pointer}
.modal-actions{display:flex;gap:10px;margin-top:20px}

/* SUBSCRIBER PORTAL */
.subscriber-shell .sidebar{width:220px;flex-basis:220px}
.subscriber-shell .logo{font-size:16px}
.subscriber-shell #pageContent .cards .card{min-height:105px}
.subscriber-shell #pageContent .cards .card:nth-child(1){border-top:4px solid var(--green)}
.subscriber-shell #pageContent .cards .card:nth-child(2){border-top:4px solid var(--yellow-dark)}
.subscriber-shell #pageContent .cards .card:nth-child(3){border-top:4px solid var(--blue)}
.subscriber-shell #pageContent .cards .card:nth-child(4){border-top:4px solid var(--red)}

/* RESPONSIVE */
@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .finance-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .layout{display:block}
  .sidebar{position:relative;width:100%;min-height:auto}
  .subscriber-shell .sidebar{width:100%}
  .menu{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:6px}
  .menu button{border-left:0;border-bottom:2px solid transparent}
  .menu button.active{border-left:0;border-bottom-color:var(--blue)}
  .menu button.active::after{display:none}
  .content{width:100%}
  #pageContent{padding:12px}
  .topbar{gap:12px;align-items:flex-start;flex-direction:column;padding:12px 15px}
  .user{width:100%}
}
@media(max-width:550px){
  .cards,.finance-grid,.form-grid{grid-template-columns:1fr}
  .choice{grid-template-columns:1fr}
  th,td{font-size:12px;padding:9px 7px}
  .panel{padding:14px}
}

@media(max-width:900px){#content>div[style*='grid-template-columns:1.35fr']{grid-template-columns:1fr!important}}