/* Maita Custom Theme - replaces Bootstrap */
:root{
  --bg: #f5f3ff;           /* soft lavender */
  --surface: #ffffff;      /* white cards */
  --soft-surface: #faf9ff;
  --text: #1f2346;
  --muted: #6b6f8a;
  --primary: #6a34f5;      /* purple */
  --primary-600:#7c4dff;
  --primary-700:#5a2de0;
  --accent: #ff9b53;       /* orange */
  --border: #e7e6f3;
  --shadow: 0 10px 24px rgba(31,35,70,0.06);
  --radius: 14px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Poppins', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.45;
}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-700); text-decoration:underline}
img{max-width:100%; display:block}

/* Grid utilities (lightweight compatibility with common Bootstrap usage) */
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
.row{display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px}
[class^="col-"], [class*=" col-"]{padding-left:12px; padding-right:12px}
.col-12{flex:0 0 100%; max-width:100%}
.col-6{flex:0 0 50%; max-width:50%}
.col-4{flex:0 0 33.333%; max-width:33.333%}
.col-3{flex:0 0 25%; max-width:25%}
@media (max-width: 991px){ .col-md-12{flex:0 0 100%; max-width:100%} .col-md-6{flex:0 0 50%; max-width:50%} .col-md-4{flex:0 0 33.333%; max-width:33.333%} }
@media (max-width: 767px){ .col-md-6,.col-md-4{flex:0 0 100%; max-width:100%} }

.mt-5{margin-top:2rem}

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}
.card-title{font-size:16px; font-weight:600; color:var(--text); margin:0 0 8px}
.card .card-text{color:var(--muted)}
.card.hoverable{transition:transform .2s ease, box-shadow .2s ease}
.card.hoverable:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(31,35,70,0.08)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; border-radius:12px; padding:.6rem 1rem; border:1px solid transparent; font-weight:600; cursor:pointer; transition:.2s ease; font-size:14px}
.btn:disabled{opacity:.65; cursor:not-allowed}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-outline{background:#fff; color:var(--primary); border-color:var(--primary)}
.btn-outline:hover{background:var(--soft-surface)}

/* Badges */
.badge{display:inline-block; padding:.3rem .6rem; border-radius:999px; font-size:12px; font-weight:600}
.badge.success{background:#e7fbef; color:#0f9d58}
.badge.warn{background:#fff2e6; color:#c76a10}
.badge.info{background:#efe9ff; color:var(--primary)}

/* Table */
.table{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.table thead th{background:var(--soft-surface); color:var(--muted); text-transform:uppercase; font-size:12px; letter-spacing:.02em; padding:14px; border-bottom:1px solid var(--border); text-align:left}
.table tbody td{padding:14px; border-bottom:1px solid var(--border)}
.table tr:hover td{background:#f7f6ff}
.table .action{display:flex; gap:.6rem; justify-content:flex-end}

/* Forms */
.input, input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="password"], select, textarea{
  width:100%; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.65rem .9rem; font-size:14px; color:var(--text); outline:none; transition:border .15s ease, box-shadow .15s ease
}
.input:focus, input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(106,52,245,0.12)}
/* Legacy Bootstrap-like helpers for forms */
.form-control{width:100%; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.65rem .9rem; font-size:14px; color:var(--text); outline:none; transition:border .15s ease, box-shadow .15s ease}
.form-control:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(106,52,245,0.12)}
.form-group{margin-bottom:12px}

/* Pagination */
.pagination{display:flex; align-items:center; gap:.5rem}
.pagination .page{width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text)}
.pagination .page.active{background:var(--primary); color:#fff; border-color:var(--primary)}
/* Compatibility for existing markup */
.pagination .page-item{list-style:none}
.pagination .page-link{display:grid; place-items:center; min-width:34px; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text)}
.pagination .page-item.active .page-link{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Layout: Sidebar + Topbar */
#sidebar{position:fixed; z-index:1000; top:0; left:0; height:100vh; width:260px; background:#1f1b2d; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 24px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; transition:width .25s ease; overflow:hidden}
#sidebar .sidebar-logo{display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:700; padding:18px 16px; font-size:18px}
#sidebar .nav{list-style:none; margin:0; padding:8px; overflow-y:auto; flex:1 1 auto; display:flex; flex-direction:column}
#sidebar .nav-item{margin:2px 0; display:block}
#sidebar .nav-link{display:flex; align-items:center; gap:10px; color:#cfcde7; padding:10px 12px; border-radius:10px; transition:background .15s ease, color .15s ease; font-size:14px; line-height:1.2; width:100%; min-width:0}
#sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff}
#sidebar .nav-link.active{background:linear-gradient(135deg, var(--primary), #9d6bff); color:#fff}
#sidebar .sub-items{padding-left:30px}
#sidebar .sidebar-toggle{margin:8px 12px; background:rgba(255,255,255,.08); color:#fff; border:0; border-radius:10px; padding:10px 12px}
#sidebar.collapsed{width:84px}
#sidebar.collapsed .nav-link span{display:none}
#sidebar.collapsed .sidebar-logo span{display:none}

.main-content{margin-left:260px; padding:24px; transition:margin-left .25s ease}
.main-content.sidebar-collapsed{margin-left:84px}

/* Topbar */
.topbar{position:sticky; top:0; z-index:900; background:var(--surface); backdrop-filter:saturate(1.2) blur(4px); border-bottom:1px solid var(--border); padding:12px 18px; display:flex; align-items:center; gap:16px}
/* Offset topbar content to avoid being covered by fixed sidebar on desktop */
.topbar{ padding-left: calc(18px + 260px); }
.topbar.sidebar-collapsed{ padding-left: calc(18px + 84px); }
.topbar .search{flex:1; position:relative}
.topbar .search input{width:100%; padding:.7rem 2.6rem .7rem .9rem; border-radius:12px; border:1px solid var(--border); background:#fff}
.topbar .search .icon{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted)}
.topbar .actions{display:flex; align-items:center; gap:12px}
.topbar .avatar{display:flex; align-items:center; gap:10px; padding:6px 10px; background:var(--soft-surface); border:1px solid var(--border); border-radius:12px}
.topbar .avatar img{width:32px; height:32px; border-radius:50%}
/* Search suggestions dropdown */
.topbar .search .suggestions{position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:1100}
.topbar .search .suggestions.open{display:block}
.topbar .search .suggestions .item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:var(--text); cursor:pointer}
.topbar .search .suggestions .item:hover, .topbar .search .suggestions .item.active{background:var(--soft-surface)}
.topbar .search .suggestions .item.disabled{pointer-events:none; color:var(--muted)}
/* Visually hidden for accessibility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* Simple dropdown for avatar menu */
.dropdown{position:relative}
.dropdown .dropdown-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none; z-index:1100}
.dropdown.open .dropdown-menu{display:block}
.dropdown .dropdown-menu a{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:var(--text); text-decoration:none}
.dropdown .dropdown-menu a:hover{background:var(--soft-surface)}

/* Breadcrumb */
.breadcrumb{display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:8px 0 18px}
.breadcrumb li{color:var(--muted); font-size:13px}
.breadcrumb a{color:var(--primary); text-decoration:none}
.breadcrumb{display:flex; align-items:center; flex-wrap:wrap; gap:6px; list-style:none; margin:8px 0 18px; padding:8px 12px; background:var(--soft-surface); border:1px solid var(--border); border-radius:12px}
.breadcrumb li{color:var(--muted); font-size:13px}
.breadcrumb a{color:var(--primary); text-decoration:none}
.breadcrumb a:hover{color:var(--primary-700)}
.breadcrumb .active{color:var(--text); font-weight:600}
.breadcrumb-item + .breadcrumb-item::before{content: ">"; margin:0 6px; color:var(--muted)}
.breadcrumb-item + .breadcrumb-item::before{content:"›"; margin:0 6px; color:var(--muted)}

/* Clickable card helper for links wrapping cards */
.card-link{display:block; color:inherit; text-decoration:none}
.card-link:hover{text-decoration:none}

/* Responsive */
@media (max-width: 1024px){ .main-content{padding:16px} }
@media (max-width: 900px){ #sidebar{transform:translateX(-100%); width:260px} #sidebar.open{transform:none} .main-content{margin-left:0} .main-content.sidebar-collapsed{margin-left:0} }
@media (max-width: 600px){ .topbar{padding:10px} .topbar .avatar span{display:none} }
@media (max-width: 900px){ .topbar{padding-left:18px !important;} }

/* Generic helpers */
.shadow{box-shadow:var(--shadow)}
.text-muted{color:var(--muted)}
.small{font-size:12px}

/* Common utility classes for compatibility */
.d-flex{display:flex}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.justify-content-between{justify-content:space-between}
.justify-content-center{justify-content:center}
.align-items-center{align-items:center}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.w-100{width:100%}
.w-md-50{width:50%}
.text-center{text-align:center}
.btn-group{display:inline-flex; gap:8px}
.table-responsive{width:100%; overflow:auto}

/* Legacy compat for Bootstrap-like class names used in pages */
.breadcrumb-item + .breadcrumb-item::before{content: ">"; margin:0 6px; color:var(--muted)}
.navbar{display:none} /* hide legacy bootstrap navbars if any still render */

/* Modal (Bootstrap-free) */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:1200; padding:16px}
.modal.open{display:flex}
/* Support legacy Bootstrap 'fade' class so modals aren't transparent */
.modal.fade{opacity:0; transition:opacity .2s ease}
.modal.fade.open{opacity:1}
.modal .modal-dialog{max-width:640px; width:100%}
.modal .modal-content{background:#fff; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; color:var(--text)}
.modal .modal-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--soft-surface)}
.modal .modal-header .modal-title{color:var(--text); font-weight:700}
.modal .modal-header .close{color:var(--muted)}
.modal .modal-body{padding:16px}
.modal .modal-footer{display:flex; align-items:center; justify-content:flex-end; padding:12px 16px; gap:10px; border-top:1px solid var(--border)}
.modal .close{background:none; border:0; font-size:20px; cursor:pointer}
body.modal-open{overflow:hidden}