/*
  Material-style “wow factor” skin for the Staff Control Panel.
  Mobile-first, modern typography, cards, and cleaner tables.
  Loaded AFTER existing scp.css to override legacy styling.
*/

:root{
  --mui-bg:#f5f7fb;
  --mui-surface:#ffffff;
  --mui-surface-2:#f8fafc;
  --mui-text:#0f172a;
  --mui-muted:#64748b;
  --mui-border:rgba(15,23,42,.10);
  --mui-shadow:0 10px 25px rgba(2,8,23,.08);
  --mui-shadow-sm:0 6px 16px rgba(2,8,23,.08);
  --mui-radius:16px;
  --mui-radius-sm:12px;
  --mui-primary:#1976d2;
  --mui-primary-2:#0b4db6;
  --mui-focus:rgba(25,118,210,.25);
}

html,body{height:100%;}
body{
  background:var(--mui-bg) !important;
  color:var(--mui-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Reduce legacy widths and add a clean centered layout */
#container{max-width:1200px; margin:0 auto; padding:0 12px;}

/* Top app bar */
#header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(135deg, var(--mui-surface), var(--mui-surface-2));
  border:1px solid var(--mui-border);
  border-radius:var(--mui-radius);
  box-shadow:var(--mui-shadow-sm);
  margin:12px 0;
  padding:10px 12px;
}

#header #logo img{max-height:40px;}
#header #info{color:var(--mui-muted); font-size:13px;}
#header #info a{color:var(--mui-primary); text-decoration:none; font-weight:600;}
#header #info a:hover{text-decoration:underline;}

/* Mobile nav toggle button injected in header.inc.php */
.mui-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--mui-border);
  background:var(--mui-surface);
  box-shadow:0 2px 10px rgba(2,8,23,.06);
  cursor:pointer;
}
.mui-nav-toggle:focus{outline:3px solid var(--mui-focus); outline-offset:2px;}
.mui-nav-toggle svg{width:20px; height:20px; fill:var(--mui-text);}

/* Main content surface */
#content{
  background:var(--mui-surface);
  border:1px solid var(--mui-border);
  border-radius:var(--mui-radius);
  box-shadow:var(--mui-shadow);
  padding:14px;
  margin:12px 0 20px;
}

/* Banners */
#error_bar,#warning_bar,#notice_bar,
#msg_error,#msg_notice,#msg_warning,
.error-banner,.warning-banner,.notice-banner{
  border-radius:12px;
  border:1px solid var(--mui-border);
  box-shadow:0 6px 16px rgba(2,8,23,.06);
}

/* Inputs */
input[type="text"],input[type="password"],input[type="email"],input[type="search"],
select,textarea{
  border-radius:12px !important;
  border:1px solid var(--mui-border) !important;
  background:var(--mui-surface) !important;
  padding:10px 12px !important;
  box-shadow:none !important;
}
input:focus,select:focus,textarea:focus{
  outline:3px solid var(--mui-focus) !important;
  outline-offset:0;
}

/* Buttons / links that look like buttons */
button,input[type="submit"],input[type="button"],a.button{
  border-radius:999px !important;
  background:var(--mui-primary) !important;
  border:1px solid rgba(0,0,0,0) !important;
  color:#fff !important;
  padding:10px 14px !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  box-shadow:0 10px 25px rgba(25,118,210,.22) !important;
}
button:hover,input[type="submit"]:hover,input[type="button"]:hover,a.button:hover{
  background:var(--mui-primary-2) !important;
}

/* Tables: cleaner + scroll on small screens */
table{border-collapse:separate !important; border-spacing:0; width:100%;}
table th{
  background:var(--mui-surface-2);
  color:var(--mui-muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
  border-bottom:1px solid var(--mui-border);
}
table th, table td{padding:10px 12px;}
table tr:hover td{background:rgba(2,8,23,.02);}

/* Legacy nav becomes modern pill tabs */
#nav{
  display:flex;
  gap:8px;
  padding:10px 6px;
  margin:0;
  list-style:none;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#nav::-webkit-scrollbar{display:none;}

#nav > li{position:relative;}
#nav > li > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--mui-border);
  background:var(--mui-surface);
  color:var(--mui-text);
  font-weight:800;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(2,8,23,.05);
  white-space:nowrap;
}
#nav > li.active > a,
#nav > li > a:hover{
  border-color:rgba(25,118,210,.35);
  box-shadow:0 10px 25px rgba(25,118,210,.12);
}
#nav > li.active > a{color:var(--mui-primary);}

/* Dropdowns (subnav) */
#nav li ul{
  border-radius:14px;
  border:1px solid var(--mui-border);
  box-shadow:var(--mui-shadow);
  overflow:hidden;
}

/* Sub-navigation area */
#sub_nav{
  border:1px solid var(--mui-border);
  border-radius:var(--mui-radius-sm);
  background:var(--mui-surface);
  box-shadow:0 6px 16px rgba(2,8,23,.06);
  margin:8px 0 0;
}

/* PJAX container spacing */
#pjax-container{padding-bottom:20px;}

/* Mobile: turn top nav into a drawer */
@media (max-width: 860px){
  #container{padding:0 10px;}
  .mui-nav-toggle{display:inline-flex;}
  /* Place nav as an overlay drawer */
  #nav{
    position:fixed;
    left:12px; right:12px;
    top:78px;
    max-height:70vh;
    flex-direction:column;
    padding:12px;
    background:var(--mui-surface);
    border:1px solid var(--mui-border);
    border-radius:var(--mui-radius);
    box-shadow:var(--mui-shadow);
    transform:translateY(-16px);
    opacity:0;
    pointer-events:none;
    transition:all .18s ease;
    overflow:auto;
  }
  body.mui-nav-open #nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  /* Backdrop */
  body.mui-nav-open:before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(2,8,23,.45);
    z-index:40;
  }
  #nav{z-index:45;}
  #header{z-index:50;}
  #header #info{float:none !important; display:block; margin-top:6px;}
}

/* Shared card / chips / auth (used by scp/login.php) */
.mui-card{background:var(--mui-surface); border:1px solid var(--mui-border); border-radius:var(--mui-radius); box-shadow:var(--mui-shadow);} 
.mui-card-pad{padding:16px;} 
.mui-muted{color:var(--mui-muted);} 
.mui-divider{height:1px; background:var(--mui-border); margin:12px 0;} 

.mui-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 14px; font-weight:800; text-decoration:none; border:1px solid rgba(25,118,210,.35); background:linear-gradient(135deg, var(--mui-primary), var(--mui-primary-2)); color:#fff;} 
.mui-btn-ghost{background:var(--mui-surface); color:var(--mui-text); border-color:var(--mui-border);} 
.mui-link{color:var(--mui-primary-2); font-weight:800; text-decoration:none;} 
.mui-link:hover{text-decoration:underline;} 

.mui-form{display:block;} 
.mui-field{display:block; margin:10px 0;} 
.mui-label{display:block; font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--mui-muted); margin:0 0 6px;} 
.mui-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px;} 
.mui-actions-center{justify-content:center;} 
.mui-input-affix{display:flex; align-items:center; gap:8px;} 
.mui-input-affix input{flex:1;} 
.mui-icon-btn{border:1px solid var(--mui-border); background:var(--mui-surface); border-radius:12px; padding:10px 12px; cursor:pointer;} 
.mui-icon-btn:focus{outline:3px solid var(--mui-focus); outline-offset:2px;} 

.mui-alert{border-radius:12px; border:1px solid var(--mui-border); padding:12px 14px; margin:0 0 12px; box-shadow:0 6px 16px rgba(2,8,23,.06);} 
.mui-alert-info{background:rgba(25,118,210,.08); border-color:rgba(25,118,210,.20);} 
.mui-alert-title{margin:0 0 6px; font-size:14px;} 

.mui-auth{max-width:980px; margin:0 auto; padding:18px 0 30px;} 
.mui-auth-hero{padding:6px 2px 14px; text-align:center;} 
.mui-auth-title{font-size:30px; margin:0 0 6px;} 
.mui-auth-subtitle{margin:0; color:var(--mui-muted);} 
.mui-auth-card{max-width:520px; margin:0 auto;} 
.mui-auth-logo img{max-height:44px; width:auto;} 
.mui-auth-scp{min-height:calc(100vh - 90px); display:flex; flex-direction:column; justify-content:center;} 
@media (max-width: 600px){
  .mui-auth{padding:12px 0 24px;} 
  .mui-card-pad{padding:14px;} 
}

/* Premium agent login */
body#loginBody.mui-auth-page{background:radial-gradient(1200px 600px at 15% 15%, rgba(25,118,210,.14), transparent 55%),
  radial-gradient(900px 500px at 85% 25%, rgba(124,58,237,.12), transparent 60%),
  linear-gradient(180deg, #f8fafc, #f1f5f9);} 

.mui-auth2{max-width:1080px; margin:22px auto 18px; display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:stretch; padding:0 18px;} 
.mui-auth2-brand{padding:26px 22px; border-radius:22px; border:1px solid rgba(255,255,255,.65); background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); box-shadow:0 18px 40px rgba(2,8,23,.10);} 
.mui-auth2-logoRow{display:flex; align-items:center; gap:12px; margin-bottom:10px;} 
.mui-auth2-logo{height:34px; width:auto; display:block;} 
.mui-auth2-title{margin:0 0 8px; font-size:34px; letter-spacing:-.02em;} 
.mui-auth2-sub{margin:0 0 14px; color:var(--mui-muted); font-weight:650; line-height:1.5;} 
.mui-auth2-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;} 
.mui-badge{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(25,118,210,.10); border:1px solid rgba(25,118,210,.20); color:var(--mui-primary-2); font-weight:900; font-size:12px; letter-spacing:.02em;} 
.mui-auth2-note{margin-top:14px; padding:12px 14px; border-radius:16px; border:1px solid var(--mui-border); background:rgba(255,255,255,.55); color:var(--mui-muted);} 

.mui-auth2-right{display:flex; flex-direction:column; gap:14px; justify-content:center;} 
.mui-auth2-card{border-radius:22px; padding:22px;} 
.mui-card-head{margin-bottom:14px;} 
.mui-card-title{font-size:18px; font-weight:950; margin:0 0 4px;} 
.mui-card-sub{color:var(--mui-muted); font-weight:650;} 

.mui-actions-stack{display:flex; flex-direction:column; gap:10px;} 
.mui-actions-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;} 
.mui-btn-full{width:100%; justify-content:center;} 

.mui-pass-toggle{width:44px; height:44px; position:relative;} 
.mui-pass-toggle::before{content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px; background:currentColor; opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5c-5 0-9.27 3.11-11 7.5 1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 13a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Zm0-9a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5c-5 0-9.27 3.11-11 7.5 1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5Zm0 13a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Zm0-9a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z'/%3E%3C/svg%3E") center/contain no-repeat;} 
.mui-pass-toggle.is-shown::before{opacity:.9; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.1 3.51 3.51 2.1 21.9 20.49 20.49 21.9l-3.15-3.15A10.92 10.92 0 0 1 12 19.5c-5 0-9.27-3.11-11-7.5.74-1.87 2.04-3.54 3.73-4.8L2.1 3.51ZM12 17c-4.42 0-8.14-4.03-8.14-5 0-1.06 1.86-3.33 4.77-4.47l1.55 1.55A2.8 2.8 0 0 0 9.2 12 2.8 2.8 0 0 0 12 14.8c.55 0 1.06-.16 1.5-.43l1.78 1.78c-.98.54-2.1.85-3.28.85Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.1 3.51 3.51 2.1 21.9 20.49 20.49 21.9l-3.15-3.15A10.92 10.92 0 0 1 12 19.5c-5 0-9.27-3.11-11-7.5.74-1.87 2.04-3.54 3.73-4.8L2.1 3.51ZM12 17c-4.42 0-8.14-4.03-8.14-5 0-1.06 1.86-3.33 4.77-4.47l1.55 1.55A2.8 2.8 0 0 0 9.2 12 2.8 2.8 0 0 0 12 14.8c.55 0 1.06-.16 1.5-.43l1.78 1.78c-.98.54-2.1.85-3.28.85Z'/%3E%3C/svg%3E") center/contain no-repeat;} 

.mui-auth2-foot{max-width:560px; color:var(--mui-muted);} 

@media (max-width: 980px){
  .mui-auth2{grid-template-columns:1fr;}
  .mui-auth2-brand{padding:20px;}
}