:root{
  --blue:#0b5cab;
  --blue2:#127bdc;
  --navy:#103556;
  --orange:#f28c28;
  --orange2:#ff6a00;
  --ink:#17324d;
  --muted:#6b7f93;
  --bg:#f4f8fc;
  --line:#dce7f1;
  --white:#fff;
  --green:#147043;
  --red:#a62a2a;
  --shadow:0 14px 34px rgba(18,65,106,.10);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}

.container{max-width:1280px;margin:26px auto;padding:0 20px}
.topbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 4vw;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.brand{display:flex;gap:12px;align-items:center;color:var(--ink)}
.brand img{width:104px;height:48px;object-fit:contain;object-position:left center}
.brand strong{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:11px}
.topbar nav{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.topbar nav a{font-weight:700;font-size:13px}

.btn-nav,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff!important;padding:11px 17px;border-radius:10px;border:0;cursor:pointer;font-weight:800;font:inherit;text-decoration:none}
.btn.orange{background:linear-gradient(135deg,var(--orange2),var(--orange))}.btn.light{background:#eaf3fc;color:var(--blue)!important}.btn.danger{background:#b93232}.btn.small{padding:7px 10px;font-size:12px}

.hero{background:linear-gradient(120deg,#083f77,#0d75d8);color:#fff;border-radius:22px;padding:32px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(242,140,40,.24);right:-60px;top:-90px}.hero h1{margin:0 0 8px;font-size:31px}.hero p{opacity:.92;max-width:800px;line-height:1.55}.hero-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:20px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 8px 22px rgba(20,60,95,.06)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:span 12}
.metric h3{font-size:30px;margin:6px 0}.metric small{color:var(--muted);font-weight:700}.metric .sub{font-size:12px;color:var(--muted)}.orange-line{border-top:4px solid var(--orange)}.blue-line{border-top:4px solid var(--blue2)}h1,h2,h3{color:inherit}h2{margin-top:0}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-size:13px;font-weight:800;color:#35516a}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #cbdbe8;border-radius:10px;background:#fff;font:inherit;color:var(--ink)}textarea{min-height:120px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid rgba(13,117,216,.15);border-color:var(--blue2)}.hint{font-size:12px;color:var(--muted)}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px}.alert.success{background:#e9f8f0;color:#12613a}.alert.error{background:#fff0f0;color:#9c2828}.alert.info{background:#edf6ff;color:#165d93}

.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;vertical-align:top}.table th{background:#f1f7fc;color:#35516a;position:sticky;top:0}
.badge{padding:5px 9px;border-radius:999px;font-weight:800;font-size:11px;display:inline-block}.badge.new{background:#e7f2ff;color:#145c9e}.badge.assigned{background:#fff3df;color:#9a5b00}.badge.process{background:#efe8ff;color:#6132a8}.badge.escalated{background:#ffe9dc;color:#a74600}.badge.completed{background:#e7f8ee;color:#147043}.badge.rejected{background:#ffe7e7;color:#9d2a2a}.badge.backlog{background:#edf0f3;color:#5d6670}.badge.neutral{background:#eef3f7;color:#526679}
.ticket-no{font-family:ui-monospace,Consolas,monospace;font-weight:900}.toolbar{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.filters select,.filters input{width:auto;min-width:145px}

.timeline{border-left:3px solid #d6e6f3;margin-left:8px;padding-left:18px}.timeline-item{margin:0 0 16px}.timeline-item small{color:var(--muted)}.split{display:grid;grid-template-columns:2fr 1fr;gap:18px}.kv{display:grid;grid-template-columns:170px 1fr;gap:9px;font-size:14px}.kv div:nth-child(odd){font-weight:800;color:#476178}.attachment img{max-width:100%;border-radius:12px;border:1px solid var(--line)}footer{text-align:center;padding:30px;color:var(--muted);font-size:12px}.role-pill{font-size:11px;padding:4px 8px;background:#eef5fb;border-radius:999px;color:#476178}
.status-help{display:grid;gap:9px}.status-help div{padding:10px;background:#f8fbfe;border:1px solid var(--line);border-radius:10px}.status-help strong{display:block;margin-bottom:3px}.modal-backdrop{position:fixed;inset:0;background:rgba(5,24,41,.68);z-index:1000;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal-card{background:#fff;width:min(500px,95vw);border-radius:20px;padding:28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.28);border-top:5px solid var(--orange)}.modal-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#fff0e3;color:#b85100;font-size:30px;font-weight:900}.modal-open{overflow:hidden}
.calendar-shell{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.cal-head{font-size:11px;font-weight:900;text-align:center;color:var(--muted);padding:7px}.cal-day{min-height:94px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px;cursor:pointer;transition:.15s}.cal-day:hover,.cal-day.active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(242,140,40,.12)}.cal-day.muted{opacity:.35}.cal-num{font-weight:900}.cal-count{display:inline-block;margin-top:8px;padding:3px 7px;border-radius:999px;background:#e8f3fd;color:var(--blue);font-size:11px;font-weight:800}.task-list{display:grid;gap:10px}.task-card{padding:12px;border:1px solid var(--line);border-left:4px solid var(--blue2);border-radius:11px;background:#fff}.task-card.urgent{border-left-color:var(--orange2)}.task-card small{color:var(--muted)}.user-choice{display:flex;align-items:center;gap:10px}.empty{padding:26px;text-align:center;color:var(--muted)}.escalation-box{background:#fff7ed;border:1px solid #ffd9ad;border-radius:12px;padding:14px}.kpi-good{color:var(--green)}.kpi-bad{color:var(--red)}

/* Login page */
.login-page{min-height:100vh;background:linear-gradient(180deg,#f8fbfe 0%,#eef5fb 100%)}
.public-nav{position:fixed;top:22px;right:28px;z-index:9999;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 40px)}
.public-nav .nav-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;background:#fff;color:var(--blue);border:1px solid var(--line);border-radius:10px;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:800;box-shadow:0 5px 16px rgba(18,65,106,.08);transition:.2s ease}
.public-nav .nav-btn:hover{background:#f5f9fd;border-color:var(--blue2);transform:translateY(-1px)}
.public-nav .nav-primary{background:linear-gradient(135deg,var(--orange2),var(--orange));color:#fff!important;border-color:transparent;box-shadow:0 6px 18px rgba(242,140,40,.2)}
.public-nav .nav-primary:hover{background:linear-gradient(135deg,#e95f00,#df7a1d);color:#fff!important}
.login-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:92px 20px 48px}
.login-shell{width:100%;max-width:500px}
.login-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:0 20px 55px rgba(16,53,86,.12)}
.login-brand-wrap{text-align:center;margin-bottom:18px}.login-logo{display:block;width:72%;max-width:260px;height:auto;margin:0 auto;object-fit:contain}
.login-eyebrow{display:inline-block;margin-bottom:8px;color:var(--orange2);font-size:11px;font-weight:900;letter-spacing:.12em}
.login-heading{margin-bottom:24px}.login-heading h1{margin:0 0 10px;font-size:26px;line-height:1.2;color:var(--ink)}.login-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.login-alert{padding:12px 14px;margin-bottom:18px;border:1px solid #ffd6d6;border-radius:10px;background:#fff0f0;color:#9c2828;font-size:13px}
.login-form{width:100%}.login-field{margin-bottom:18px}.login-field label{display:block;margin-bottom:7px}.login-field input{height:48px;border-radius:10px}
.login-button{width:100%;min-height:48px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(11,92,171,.18)}.login-button:hover{transform:translateY(-1px)}
.login-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:12px}.login-links span{color:#a7b3bf}
.login-footer{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:24px;padding-top:18px;border-top:1px solid #e7eef5;color:#8293a3;font-size:11px}.login-footer-dot{color:var(--orange)}

@media(max-width:900px){.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9{grid-column:1/-1}.form-grid,.split,.calendar-shell{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px;flex-direction:column}.container{margin-top:18px}.hero h1{font-size:26px}.kv{grid-template-columns:1fr}.kv div:nth-child(odd){margin-top:8px}.cal-day{min-height:76px}.brand img{width:88px}.public-nav{top:16px;right:18px;gap:7px}.public-nav .nav-btn{min-height:39px;padding:0 13px;font-size:12px}}
@media(max-width:650px){.public-nav{position:relative;top:auto;right:auto;width:100%;max-width:none;padding:14px 14px 0;justify-content:center;flex-wrap:wrap}.public-nav .nav-btn{flex:1 1 auto;min-width:105px;min-height:38px;padding:0 11px;font-size:11px}.login-main{min-height:auto;padding:24px 14px 40px}.login-card{padding:24px 20px;border-radius:16px}.login-logo{width:68%;max-width:220px}.login-heading h1{font-size:22px}}
@media(max-width:420px){.public-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.public-nav .nav-primary{grid-column:1/-1}.public-nav .nav-btn{width:100%}.login-card{padding:22px 16px}.login-footer{flex-wrap:wrap}}

/* ==================================================
   ACTIVE TOP NAVIGATION
   ================================================== */

.topbar nav a.nav-active{
    color:var(--blue2);
    position:relative;
}

.topbar nav a.nav-active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    background:var(--orange);
    border-radius:999px;
}


/* ==================================================
   USER & SLA ACCESS PAGE
   ================================================== */

.user-page .grid{
    align-items:start;
}

.user-page .card{
    overflow:hidden;
}

.user-page .card h2{
    margin-bottom:6px;
}

.user-page .card .hint{
    line-height:1.45;
}

.create-user-card{
    position:sticky;
    top:96px;
}

.user-page .form-grid{
    align-items:start;
}


/* ==================================================
   PROFESSIONAL SKILL SELECTOR
   ================================================== */

.skill-selection{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:6px;
}

.skill-checkbox{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#f8fbfe;
    color:#35516a;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.skill-checkbox:hover{
    background:#f1f7fd;
    border-color:var(--blue2);
    box-shadow:0 4px 14px rgba(18,65,106,.07);
    transform:translateY(-1px);
}

.skill-checkbox input[type="checkbox"]{
    width:16px!important;
    height:16px!important;
    min-width:16px;
    flex:0 0 16px;
    margin:0 10px 0 0!important;
    padding:0!important;
    accent-color:var(--blue2);
}

.skill-checkbox span{
    display:block;
    flex:1;
    min-width:0;
    line-height:1.35;
}

.skill-checkbox:has(input:checked){
    background:#eef7ff;
    border-color:#87bce9;
    box-shadow:0 0 0 2px rgba(18,123,220,.07);
}


/* ==================================================
   CURRENT USERS TABLE
   ================================================== */

.user-table-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.user-table-head h2{
    margin:0 0 4px;
}

.user-table-wrap{
    overflow:auto;
    border:1px solid #e4edf5;
    border-radius:12px;
}

.user-table{
    width:100%;
    min-width:900px;
    table-layout:auto;
}

.user-table th{
    white-space:nowrap;
    font-size:12px;
}

.user-table td{
    vertical-align:top;
    line-height:1.35;
}

.user-table tbody tr{
    transition:background .15s ease;
}

.user-table tbody tr:hover{
    background:#fbfdff;
}

.user-table th:nth-child(1){width:14%}
.user-table th:nth-child(2){width:22%}
.user-table th:nth-child(3){width:10%}
.user-table th:nth-child(4){width:11%}
.user-table th:nth-child(5){width:8%}
.user-table th:nth-child(6){width:27%}
.user-table th:nth-child(7){width:8%}

.skill-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    max-width:100%;
}

.skill-tag{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:5px 8px;
    border-radius:999px;
    background:#eaf3fc;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    white-space:normal;
}

.user-table .role-pill{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#eef5fb;
    color:#476178;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.user-table .badge{
    white-space:nowrap;
}

.user-table .btn.small{
    min-width:52px;
    padding:7px 11px;
}


/* ==================================================
   PROFILE PAGE POLISH
   ================================================== */

.profile-grid .card{
    min-height:100%;
}

.profile-grid .kv{
    grid-template-columns:150px 1fr;
    row-gap:14px;
    column-gap:16px;
}

.profile-grid .kv > div{
    padding-bottom:8px;
    border-bottom:1px solid #eef3f7;
}


/* ==================================================
   SKILL CATEGORY ADMIN
   ================================================== */

.skill-admin-row{
    display:grid;
    grid-template-columns:minmax(240px,1fr) 110px 130px 90px;
    gap:10px;
    align-items:center;
}

.skill-admin-row input[type="text"],
.skill-admin-row input[type="number"]{
    width:100%;
}

.skill-admin-active .skill-checkbox{
    min-height:42px;
    margin:0;
}

.skill-admin-action{
    text-align:right;
}

.skill-admin-action .btn{
    min-width:70px;
}


/* ==================================================
   PERSONAL TASK / CALENDAR READY STYLES
   ================================================== */

.task-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
}

.task-status{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
}

.task-status.todo{
    background:#edf6ff;
    color:#165d93;
}

.task-status.in-progress{
    background:#efe8ff;
    color:#6132a8;
}

.task-status.waiting{
    background:#fff3df;
    color:#9a5b00;
}

.task-status.completed{
    background:#e7f8ee;
    color:#147043;
}

.task-status.cancelled{
    background:#edf0f3;
    color:#5d6670;
}

.task-card.personal{
    border-left-color:var(--orange);
}

.task-card.ticket{
    border-left-color:var(--blue2);
}


/* ==================================================
   RESPONSIVE USER / SKILLS PAGES
   ================================================== */

@media(max-width:1100px){
    .create-user-card{
        position:static;
    }

    .skill-selection{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){
    .user-page .span-4,
    .user-page .span-8,
    .user-page .span-5,
    .user-page .span-7{
        grid-column:1/-1;
    }

    .user-table{
        min-width:840px;
    }

    .profile-grid .kv{
        grid-template-columns:1fr;
    }

    .skill-admin-row{
        grid-template-columns:1fr 90px 120px 80px;
    }
}

@media(max-width:650px){
    .skill-selection{
        grid-template-columns:1fr;
    }

    .user-table-head{
        flex-direction:column;
    }

    .user-table{
        min-width:760px;
    }

    .skill-admin-row{
        grid-template-columns:1fr;
    }

    .skill-admin-action{
        text-align:left;
    }

    .skill-admin-action .btn{
        width:100%;
    }
}


/* ==========================================================
   PADRA LEFT SIDEBAR APPLICATION LAYOUT
   ========================================================== */

:root{
  --sidebar-width:260px;
  --sidebar-bg:#ffffff;
  --sidebar-border:#dce7f1;
  --sidebar-text:#294961;
  --sidebar-muted:#8a9aaa;
  --sidebar-active:#0b5cab;
  --sidebar-active-bg:#edf6ff;
}

body.app-with-sidebar{
  min-height:100vh;
  background:var(--bg);
  overflow-x:hidden;
}

body.app-with-sidebar .topbar{
  display:none!important;
}

.app-sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sidebar-width);
  z-index:500;
  display:flex;
  flex-direction:column;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  box-shadow:4px 0 22px rgba(16,53,86,.06);
  overflow-y:auto;
  overflow-x:hidden;
}

.app-content{
  min-height:100vh;
  margin-left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
}

.app-content > .container{
  width:100%;
  max-width:1450px;
  margin:26px auto;
  padding:0 28px;
}

body.app-with-sidebar > footer{
  margin-left:var(--sidebar-width);
}

.sidebar-brand{
  flex-shrink:0;
  padding:20px 18px 16px;
  text-align:center;
  border-bottom:1px solid #edf2f7;
}

.sidebar-brand > a{display:block}

.sidebar-brand img{
  display:block!important;
  width:150px!important;
  max-width:150px!important;
  height:58px!important;
  margin:0 auto 10px!important;
  object-fit:contain!important;
}

.sidebar-brand-text strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
}

.sidebar-brand-text small{
  display:block;
  margin-top:3px;
  color:#8193a3;
  font-size:10px;
  font-weight:700;
}

.sidebar-nav{
  flex:1;
  padding:12px 10px;
  overflow-y:auto;
}

.sidebar-section{margin-bottom:14px}

.sidebar-section-title{
  padding:6px 10px 7px;
  color:#99a8b5;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.sidebar-link{
  position:relative;
  display:flex!important;
  align-items:center;
  min-height:42px;
  margin-bottom:3px;
  padding:9px 11px;
  color:#3b566c!important;
  border-radius:10px;
  text-decoration:none!important;
  font-size:13px;
  font-weight:750;
  line-height:1.2;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}

.sidebar-link:hover{
  background:#f4f8fc;
  color:var(--blue)!important;
  transform:translateX(2px);
}

.sidebar-link.nav-active{
  background:linear-gradient(135deg,#eaf4ff,#f4f9fe);
  color:var(--blue)!important;
  font-weight:900;
}

.sidebar-link.nav-active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:7px;
  bottom:7px;
  width:4px;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  border-radius:0 5px 5px 0;
}

.sidebar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  margin-right:8px;
  color:#668096;
  font-size:14px;
  font-weight:900;
}

.sidebar-link.nav-active .sidebar-icon{color:var(--blue)}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 10px 10px;
  padding:12px;
  background:#f7fafc;
  border:1px solid #e5edf4;
  border-radius:12px;
}

.sidebar-avatar{
  width:38px;
  min-width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  border-radius:50%;
  font-size:15px;
  font-weight:900;
}

.sidebar-user-info{min-width:0;flex:1}

.sidebar-user-info strong{
  display:block;
  max-width:145px;
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-user-info small{
  display:block;
  margin-top:2px;
  max-width:145px;
  overflow:hidden;
  color:#8193a3;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar-logout{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  margin:0 10px 14px;
  padding:9px 14px;
  background:#fff1f1;
  color:var(--red)!important;
  border:1px solid #f1d2d2;
  border-radius:10px;
  text-decoration:none!important;
  font-size:12px;
  font-weight:900;
}

.sidebar-logout:hover{
  background:#ffe7e7;
  color:#8f1f1f!important;
}

.mobile-app-header{display:none}

.sidebar-overlay{
  position:fixed;
  inset:0;
  z-index:490;
  background:rgba(5,24,41,.55);
}

.sidebar-overlay[hidden]{display:none}

body.public-layout .public-topbar{display:flex}

body.app-with-sidebar .hero,
body.app-with-sidebar .grid,
body.app-with-sidebar .calendar-shell,
body.app-with-sidebar .split{
  width:100%;
}

body.app-with-sidebar .hero{margin-top:0}

body.app-with-sidebar img{
  max-width:100%;
  height:auto;
}

@media(max-width:900px){

  body.app-with-sidebar{padding-top:66px}

  .mobile-app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:480;
    height:66px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 15px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 3px 14px rgba(16,53,86,.08);
  }

  .sidebar-toggle{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:#edf5fd;
    color:var(--blue);
    border:1px solid #d8e7f3;
    border-radius:10px;
    font-size:22px;
    font-weight:900;
    cursor:pointer;
  }

  .mobile-brand{
    min-width:0;
    display:flex;
    align-items:center;
    color:var(--ink);
    text-decoration:none;
  }

  .mobile-brand img{
    width:72px!important;
    max-width:72px!important;
    height:42px!important;
    margin-right:10px;
    object-fit:contain!important;
  }

  .mobile-brand strong{
    display:block;
    font-size:13px;
  }

  .mobile-brand small{
    display:block;
    color:#8193a3;
    font-size:9px;
  }

  .app-sidebar{
    width:275px;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:12px 0 35px rgba(5,24,41,.18);
  }

  .app-sidebar.sidebar-open{transform:translateX(0)}

  .app-content{
    width:100%;
    margin-left:0;
  }

  .app-content > .container{
    width:100%;
    max-width:none;
    margin:18px auto;
    padding:0 14px;
  }

  body.app-with-sidebar > footer{margin-left:0}

  body.sidebar-mobile-open{overflow:hidden}
}

@media(max-width:480px){

  .app-sidebar{width:min(86vw,300px)}

  .mobile-brand strong{font-size:12px}

  .mobile-brand small{display:none}

  .hero{
    padding:24px 20px;
    border-radius:16px;
  }

  .hero h1{font-size:23px}
}

/* ==========================================================
   PROFESSIONAL GLOBAL ALIGNMENT SYSTEM
   ========================================================== */

/* Consistent vertical rhythm and predictable field sizing. */
body.app-with-sidebar .card h2,
body.app-with-sidebar .card h3{line-height:1.25}

.field{min-width:0}
.field > label{min-height:18px;display:flex;align-items:flex-end}

input:not([type="checkbox"]):not([type="radio"]),
select{
  min-height:48px;
  line-height:1.3;
}

textarea{line-height:1.5}

input::placeholder,
textarea::placeholder{color:#9aa9b7;opacity:1}

input[type="number"]{
  text-align:center;
  font-variant-numeric:tabular-nums;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
.cal-num,
.metric h3,
.table td{
  font-variant-numeric:tabular-nums;
}

/* Use the browser's modern native date picker with clear affordance. */
input[type="date"],
input[type="datetime-local"],
input[type="time"]{
  color-scheme:light;
  cursor:pointer;
  background-color:#fff;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.72;
}

/* Forms align cleanly even when labels wrap. */
.form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}

.filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:end;
  width:100%;
}

.filters input,
.filters select,
.filters .btn{
  width:100%;
  min-width:0;
  min-height:44px;
}

/* KPI numbers are centered and visually balanced. */
.metric{
  display:flex;
  min-height:124px;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.metric h3{margin:8px 0 0}

/* Tables: stable columns, centered quantitative cells and clean actions. */
.table-wrap{
  width:100%;
  border:1px solid #e2ebf3;
  border-radius:12px;
  background:#fff;
}

.table th{
  vertical-align:middle;
  white-space:nowrap;
}

.table td{vertical-align:middle}

.table th[scope="col"],
.table td.numeric,
.table th.numeric,
.table td.center,
.table th.center{
  text-align:center;
}

.table .badge,
.table .role-pill{white-space:nowrap}

.table td:last-child,
.table th:last-child{text-align:center}

.table td:last-child .btn{white-space:nowrap}

/* Existing Users page column alignment. */
.user-table th:nth-child(3),
.user-table td:nth-child(3),
.user-table th:nth-child(4),
.user-table td:nth-child(4),
.user-table th:nth-child(5),
.user-table td:nth-child(5),
.user-table th:nth-child(6),
.user-table td:nth-child(6),
.user-table th:nth-child(7),
.user-table td:nth-child(7){vertical-align:middle}

.user-table th:nth-child(3),
.user-table td:nth-child(3),
.user-table th:nth-child(4),
.user-table td:nth-child(4),
.user-table th:nth-child(5),
.user-table td:nth-child(5),
.user-table th:nth-child(7),
.user-table td:nth-child(7){text-align:center}

/* Calendar receives a modern, balanced month layout. */
.calendar-shell{align-items:start}
.calendar-grid{gap:8px}
.calendar-month-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.calendar-month-title .hint{display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.08em}
.calendar-month-title h2{margin:0}
.calendar-month-actions{display:flex;align-items:center;gap:7px}
.calendar-month-actions .btn{min-width:42px;min-height:38px;padding:7px 11px}
.cal-head{padding:10px 6px;text-transform:uppercase;letter-spacing:.05em}
.cal-day{
  min-height:108px;
  padding:10px;
  border-radius:14px;
  text-align:left;
  box-shadow:0 2px 8px rgba(16,53,86,.025);
  color:var(--ink);
  font:inherit;
  appearance:none;
}
.cal-day:focus-visible{outline:3px solid rgba(18,123,220,.22);outline-offset:1px}
.cal-day-top{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:4px}
.cal-num{
  display:flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.cal-today-label{
  padding:3px 7px;
  border-radius:999px;
  background:#e8f3fd;
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}
.cal-day.active .cal-num{
  background:var(--blue2);
  color:#fff;
}
.cal-count{text-align:center}

@media(max-width:900px){
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-day{min-height:86px}
}

@media(max-width:600px){
  .form-grid,.filters{grid-template-columns:1fr}
  .calendar-grid{gap:4px}
  .cal-day{min-height:68px;padding:6px;border-radius:9px}
  .cal-num{width:25px;height:25px;font-size:12px}
  .cal-count{padding:2px 5px;font-size:9px}
  .calendar-month-toolbar{align-items:flex-start}
  .calendar-month-title h2{font-size:19px}
  .cal-today-label{display:none}
}

/* ==========================================================
   INTEGRATION MARKETPLACE
   ========================================================== */

.integration-hero{margin-bottom:20px}
.integration-safety-note{
  margin:0 0 24px;
  padding:15px 17px;
  border:1px solid color-mix(in srgb,var(--theme-primary) 30%,var(--theme-line));
  border-left:4px solid var(--theme-primary);
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--theme-ink);
  line-height:1.55;
}
.integration-safety-note strong{display:block;margin-bottom:3px}
.integration-section{margin:0 0 28px}
.integration-section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.integration-section-heading h2{margin:2px 0 0;color:var(--theme-ink)}
.integration-count{
  padding:5px 10px;
  border-radius:999px;
  background:var(--surface-muted);
  color:var(--theme-muted);
  font-size:12px;
  font-weight:800;
}
.integration-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.integration-card{
  display:flex;
  min-width:0;
  min-height:250px;
  flex-direction:column;
  padding:19px;
  border:1px solid var(--theme-line);
  border-radius:16px;
  background:var(--surface);
  color:var(--theme-ink);
  box-shadow:0 8px 24px rgba(18,43,65,.06);
}
.integration-card-top{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.integration-logo{
  display:grid;
  width:50px;
  height:50px;
  flex:0 0 50px;
  place-items:center;
  border-radius:14px;
  background:#fff;
  color:var(--theme-primary);
  font-size:16px;
  font-weight:900;
  letter-spacing:-.03em;
  border:1px solid rgba(20,48,72,.1);
  box-shadow:0 5px 14px rgba(12,36,56,.10);
}
.integration-logo img{display:block;width:38px;height:38px;object-fit:contain}
.integration-title{min-width:0}
.integration-title h3{margin:0 0 5px;color:var(--theme-ink);font-size:17px}
.integration-card>p{margin:0;color:var(--theme-muted);line-height:1.55}
.integration-status{
  display:inline-flex;
  padding:3px 8px;
  border-radius:999px;
  background:var(--surface-muted);
  color:var(--theme-muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.integration-status.status-ready,.integration-status.status-connected{background:#e7f7ef;color:#087f5b}
.integration-status.status-error,.integration-status.status-reauthorization_required{background:#fff0f0;color:#b42318}
.integration-account{margin-top:13px;padding:9px 10px;border-radius:9px;background:var(--surface-soft);font-size:12px;overflow-wrap:anywhere}
.integration-card-actions{margin-top:auto;padding-top:17px}
.integration-card-actions .btn{width:100%}
.integration-card-actions .btn:disabled{cursor:not-allowed;opacity:.72}

@media(max-width:1100px){.integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .integration-grid{grid-template-columns:1fr}
  .integration-card{min-height:0}
  .integration-section-heading{align-items:flex-start}
}

/* ==========================================================
   USER MANAGEMENT PAGE
   ========================================================== */

.user-management-page{
  width:100%;
  max-width:1450px;
  margin:0 auto;
  padding:24px;
}

.create-account-card{margin-bottom:30px}

.user-create-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.user-create-grid .field > label{margin:0}

.user-active-field{justify-content:flex-end}

.user-active-toggle{
  display:flex!important;
  min-height:48px!important;
  align-items:center!important;
  gap:10px;
  padding:0 14px;
  border:1px solid #cbdbe8;
  border-radius:10px;
  background:#f8fbfe;
  cursor:pointer;
}

.user-active-toggle input[type="checkbox"]{
  width:18px;
  min-width:18px;
  height:18px;
  margin:0;
  accent-color:var(--blue2);
}

.user-management-table-wrap{margin-top:12px}
.user-management-table{min-width:1020px}
.user-management-table tbody tr:hover{background:#f8fbfe}
.user-management-table th:nth-child(1){width:15%}
.user-management-table th:nth-child(2){width:24%}
.user-management-table th:nth-child(3){width:10%}
.user-management-table th:nth-child(4){width:13%}
.user-management-table th:nth-child(5){width:8%}
.user-management-table th:nth-child(6){width:9%}
.user-management-table th:nth-child(7){width:17%}
.user-management-table th:nth-child(8){width:9%}
.user-management-table td.center,
.user-management-table th.center{text-align:center}

@media(max-width:1200px){
  .user-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .user-management-page{padding:17px}
  .user-create-grid{grid-template-columns:1fr}
}

/* Roles and permission editor. */
.role-management-table{min-width:980px}
.role-management-table td.center,
.role-management-table th.center{text-align:center}
.permission-module{
  margin:18px 0 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdff;
}
.permission-module legend{
  padding:0 8px;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
}
.permission-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.permission-grid .skill-checkbox{min-height:58px}
.permission-grid .skill-checkbox small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  font-weight:600;
}
@media(max-width:1050px){.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.permission-grid{grid-template-columns:1fr}}

/* ==========================================================
   PER-USER PORTAL THEMES
   ========================================================== */

body{
  --theme-primary:#0b5cab;
  --theme-secondary:#127bdc;
  --theme-accent:#f28c28;
  --theme-accent-strong:#ff6a00;
  --theme-hero-start:#083f77;
  --theme-hero-end:#0d75d8;
  --surface:#ffffff;
  --surface-soft:#f8fbfe;
  --surface-muted:#f1f7fc;
  --control-bg:#ffffff;
  --control-border:#cbdbe8;
  --theme-ink:#17324d;
  --theme-muted:#6b7f93;
  --theme-line:#dce7f1;
  --theme-bg:#f4f8fc;
}

body[data-theme="ocean_blue"]{
  --theme-primary:#006d8f;--theme-secondary:#0096c7;
  --theme-accent:#f08c46;--theme-accent-strong:#e76f00;
  --theme-hero-start:#004c6d;--theme-hero-end:#008fc2;
}
body[data-theme="emerald"]{
  --theme-primary:#087f5b;--theme-secondary:#12a878;
  --theme-accent:#e9902c;--theme-accent-strong:#f27600;
  --theme-hero-start:#07563f;--theme-hero-end:#0ca678;
}
body[data-theme="royal_purple"]{
  --theme-primary:#6741a5;--theme-secondary:#845ef7;
  --theme-accent:#e89b25;--theme-accent-strong:#f07800;
  --theme-hero-start:#45267a;--theme-hero-end:#7048e8;
}
body[data-theme="dark_navy"]{
  --theme-primary:#16324f;--theme-secondary:#2f5d8a;
  --theme-accent:#e99a32;--theme-accent-strong:#f27600;
  --theme-hero-start:#0d2238;--theme-hero-end:#28547c;
}
body[data-theme="light_neutral"]{
  --theme-primary:#526779;--theme-secondary:#73889a;
  --theme-accent:#d98324;--theme-accent-strong:#ed7100;
  --theme-hero-start:#415563;--theme-hero-end:#71899a;
}

body{
  --blue:var(--theme-primary);
  --blue2:var(--theme-secondary);
  --orange:var(--theme-accent);
  --orange2:var(--theme-accent-strong);
  --ink:var(--theme-ink);
  --muted:var(--theme-muted);
  --line:var(--theme-line);
  --bg:var(--theme-bg);
  --white:var(--surface);
  --sidebar-bg:var(--surface);
  --sidebar-border:var(--theme-line);
}

body .hero{background:linear-gradient(120deg,var(--theme-hero-start),var(--theme-hero-end))}
body .card,
body .table,
body .table-wrap,
body .modal-card,
body .cal-day,
body .task-card{background:var(--surface)}
body input,
body select,
body textarea{background:var(--control-bg);border-color:var(--control-border);color:var(--theme-ink)}
body .table th{background:var(--surface-muted);color:var(--theme-ink)}
body .status-help div,
body .skill-checkbox,
body .sidebar-user,
body .permission-module,
body .user-active-toggle{background:var(--surface-soft)}
body .sidebar-link:hover{background:var(--surface-soft)}
body .sidebar-link.nav-active{background:var(--surface-muted)}
body .mobile-app-header{background:var(--surface)}

body[data-color-mode="dark"]{
  --theme-bg:#0d1722;
  --surface:#152231;
  --surface-soft:#1b2b3c;
  --surface-muted:#223448;
  --control-bg:#111e2b;
  --control-border:#3a5167;
  --theme-ink:#edf5fc;
  --theme-muted:#a8bbcc;
  --theme-line:#304357;
  color-scheme:dark;
}

@media(prefers-color-scheme:dark){
  body[data-color-mode="system"]{
    --theme-bg:#0d1722;
    --surface:#152231;
    --surface-soft:#1b2b3c;
    --surface-muted:#223448;
    --control-bg:#111e2b;
    --control-border:#3a5167;
    --theme-ink:#edf5fc;
    --theme-muted:#a8bbcc;
    --theme-line:#304357;
    color-scheme:dark;
  }
}

body[data-color-mode="dark"],
body[data-color-mode="dark"] html{background:var(--theme-bg);color:var(--theme-ink)}
body[data-color-mode="dark"] label,
body[data-color-mode="dark"] .sidebar-link,
body[data-color-mode="dark"] .sidebar-brand-text strong,
body[data-color-mode="dark"] .sidebar-user-info strong,
body[data-color-mode="dark"] .permission-module legend{color:var(--theme-ink)!important}
body[data-color-mode="dark"] .sidebar-brand,
body[data-color-mode="dark"] .mobile-app-header{border-color:var(--theme-line)}
body[data-color-mode="dark"] .table tbody tr:hover,
body[data-color-mode="dark"] .user-management-table tbody tr:hover{background:var(--surface-soft)}

@media(prefers-color-scheme:dark){
  body[data-color-mode="system"] label,
  body[data-color-mode="system"] .sidebar-link,
  body[data-color-mode="system"] .sidebar-brand-text strong,
  body[data-color-mode="system"] .sidebar-user-info strong,
  body[data-color-mode="system"] .permission-module legend{color:var(--theme-ink)!important}
}

/* Compact mode affects desktop density only; touch sizes remain accessible. */
@media(min-width:901px){
  body.compact-layout .app-content > .container{margin-top:18px;margin-bottom:18px}
  body.compact-layout .grid{gap:13px;margin-top:15px}
  body.compact-layout .card{padding:16px}
  body.compact-layout .table th,
  body.compact-layout .table td{padding:9px 10px}
  body.compact-layout .sidebar-link{min-height:37px;padding-top:7px;padding-bottom:7px}
}

.appearance-form{align-items:end}
.appearance-compact-option small{display:block;margin-top:3px;color:var(--muted);font-weight:600}
.appearance-actions{align-items:flex-end}
.appearance-actions .btn{min-width:220px}

@media(max-width:600px){
  .appearance-actions .btn{width:100%;min-width:0}
}

/* ==========================================================
   CROSS-BROWSER RESPONSIVE FOUNDATION
   ========================================================== */

html{
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-wrap:break-word;
}

main,
.app-content,
.container,
.grid,
.card,
.field,
.table-wrap{min-width:0}

button,
input,
select,
textarea{
  max-width:100%;
  border-radius:10px;
  -webkit-appearance:none;
  appearance:none;
}

select{
  -webkit-appearance:auto;
  appearance:auto;
}

input[type="checkbox"],
input[type="radio"],
input[type="file"]{
  -webkit-appearance:auto;
  appearance:auto;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"]{
  min-width:0;
  -webkit-appearance:auto;
  appearance:auto;
}

button,
.btn,
.sidebar-link,
a{-webkit-tap-highlight-color:transparent}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(18,123,220,.25);
  outline-offset:2px;
}

.table-wrap{
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.table{min-width:720px}
.table th,.table td{overflow-wrap:normal;word-break:normal}
.table td{max-width:340px}
.table td:first-child{white-space:normal}

.modal-backdrop{
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

.modal-card{
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@supports(height:100dvh){
  .modal-card{max-height:calc(100dvh - 32px)}
}

@media(max-width:900px){
  body.app-with-sidebar{
    padding-top:calc(66px + env(safe-area-inset-top));
  }

  .mobile-app-header{
    height:calc(66px + env(safe-area-inset-top));
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-right:max(15px,env(safe-area-inset-right));
    padding-left:max(15px,env(safe-area-inset-left));
  }

  .app-sidebar{
    padding-bottom:env(safe-area-inset-bottom);
    overscroll-behavior:contain;
  }

  .app-content > .container{
    margin:14px auto 20px;
    padding-right:max(14px,env(safe-area-inset-right));
    padding-left:max(14px,env(safe-area-inset-left));
  }

  .grid{gap:14px;margin-top:14px}
  .card{padding:18px}
  .toolbar{align-items:flex-start}
  .filters{width:100%}
  .filters .field{width:100%}
  .filters input,.filters select{width:100%;min-width:0}

  body.app-with-sidebar > footer{
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
    padding-left:max(16px,env(safe-area-inset-left));
  }
}

@media(max-width:600px){
  .hero{padding:22px 18px;border-radius:15px}
  .hero h1{font-size:22px;line-height:1.2}
  .hero p{font-size:14px;line-height:1.5}
  .hero:after{width:150px;height:150px;right:-60px;top:-70px}

  .card{padding:16px;border-radius:14px}
  .card h2{font-size:20px}
  .card h3{font-size:17px}

  .form-grid{gap:13px}
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{font-size:16px}

  button,
  .btn{min-height:44px}

  .hero-actions,
  .toolbar{
    width:100%;
    align-items:stretch;
    flex-direction:column;
  }

  .hero-actions .btn,
  .toolbar > .btn,
  .toolbar > a.btn{width:100%}

  .kv{gap:5px}
  .kv div:nth-child(odd){margin-top:12px;color:var(--muted);font-size:12px}

  .table{min-width:680px}
  .table th,.table td{padding:10px;font-size:12px}

  .modal-backdrop{align-items:end;padding:10px}
  .modal-card{
    width:100%;
    max-height:calc(100vh - 20px);
    padding:22px 18px;
    border-radius:18px;
  }

  .user-management-page{padding:0}
  .user-management-table{min-width:920px}
  .permission-module{padding:13px}
}

@media(max-width:380px){
  .mobile-app-header{gap:8px;padding-right:10px;padding-left:10px}
  .sidebar-toggle{width:40px;height:40px;flex-basis:40px}
  .mobile-brand img{width:62px!important;max-width:62px!important;margin-right:7px}
  .mobile-brand strong{font-size:11px}
  .app-content > .container{padding-right:10px;padding-left:10px}
  .card{padding:14px}
}

@media print{
  .app-sidebar,.mobile-app-header,.sidebar-overlay,.btn,button{display:none!important}
  .app-content,body.app-with-sidebar > footer{width:100%!important;margin-left:0!important}
  body{background:#fff!important;color:#000!important}
  .card{box-shadow:none;break-inside:avoid}
}

/* ==========================================================
   EELADESK UI STABILIZATION — DESKTOP, TABLET AND MOBILE
   ========================================================== */

html{color-scheme:light}
body[data-color-mode="dark"]{color-scheme:dark}
@media(prefers-color-scheme:dark){
  body[data-color-mode="system"]{color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
.grid>* ,.form-grid>* ,.split>* ,.calendar-shell>*{min-width:0}
.card,.hero,.table-wrap{max-width:100%}
.hero>*{position:relative;z-index:1}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width:100%;
  min-width:0;
  max-width:100%;
}
input:not([type="checkbox"]):not([type="radio"]),select{min-height:48px}
textarea{resize:vertical}

input[type="date"],
input[type="datetime-local"],
input[type="time"]{
  background-color:var(--control-bg)!important;
  border-color:var(--control-border)!important;
  color:var(--theme-ink)!important;
  color-scheme:light;
}
body[data-color-mode="dark"] input[type="date"],
body[data-color-mode="dark"] input[type="datetime-local"],
body[data-color-mode="dark"] input[type="time"]{color-scheme:dark}
@media(prefers-color-scheme:dark){
  body[data-color-mode="system"] input[type="date"],
  body[data-color-mode="system"] input[type="datetime-local"],
  body[data-color-mode="system"] input[type="time"]{color-scheme:dark}
}

.cal-head{color:var(--theme-muted)!important}
.cal-day{
  background:var(--surface)!important;
  border-color:var(--theme-line)!important;
  color:var(--theme-ink)!important;
}
.cal-day:hover,.cal-day.active{
  border-color:var(--theme-accent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 22%,transparent)!important;
}
.cal-num{color:var(--theme-ink)!important}
.cal-count{
  background:var(--surface-muted)!important;
  color:var(--theme-primary)!important;
}
.task-card{background:var(--surface)!important;color:var(--theme-ink)!important}

.table-wrap{border-radius:12px;overscroll-behavior-inline:contain}
.table{width:100%}
.table th,.table td{vertical-align:middle}
.table td{overflow-wrap:anywhere}

.sidebar-brand img{width:168px!important;max-width:100%;height:auto;object-fit:contain}
.mobile-brand img{width:116px!important;max-width:32vw;height:auto;object-fit:contain}
.brand img{width:180px;height:auto;object-fit:contain}
.login-logo{width:min(360px,85vw)!important;height:auto!important;object-fit:contain}

.attachment-preview img,
.attachment-preview video,
.ticket-attachment img,
.ticket-attachment video{
  display:block;
  width:auto;
  max-width:100%;
  max-height:520px;
  border-radius:10px;
}

@media(max-width:1200px){
  .user-management-page .form-grid,
  .user-page .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calendar-shell{grid-template-columns:minmax(0,1fr) minmax(280px,.65fr)}
}

@media(max-width:1050px){
  .grid>.span-8,.grid>.span-4,
  .grid>.span-7,.grid>.span-5{grid-column:1/-1}
  .calendar-shell{grid-template-columns:1fr}
  .calendar-grid{overflow-x:auto;padding-bottom:6px}
  .calendar-grid>.cal-day,.calendar-grid>.cal-head{min-width:76px}
}

@media(max-width:900px){
  .sidebar-brand img{width:152px!important}
  .user-management-page .form-grid,
  .user-page .form-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .mobile-brand img{width:96px!important;max-width:34vw!important}
  .mobile-brand small{display:none}
  .calendar-grid>.cal-day,.calendar-grid>.cal-head{min-width:66px}
  .cal-day{min-height:72px!important;padding:6px!important}
  .form-grid .btn,.form-grid button[type="submit"]{width:100%}
}