*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#182230;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.shell{display:flex;min-height:100vh}.sidebar{width:245px;background:#111827;color:#fff;position:fixed;top:0;bottom:0;padding:23px 15px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:5px 10px 25px}.brand>span,.login-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#5b46e8,#836aff);display:grid;place-items:center;font-weight:800}.brand b,.brand small,.user b,.user small{display:block}.brand b{font-size:18px}.brand small,.user small{color:#8d98aa;font-size:10px}.user{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #ffffff12;background:#ffffff0a;border-radius:13px;margin-bottom:17px}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#ece9ff;color:#5946dc;font-weight:800}.sidebar nav{display:grid;gap:4px}.sidebar nav a,.logout{color:#aeb8c8;text-decoration:none;padding:11px 12px;border-radius:10px;font-size:12px}.sidebar nav a:hover{background:#222b3c;color:white}.logout{margin-top:auto;background:#192235}.main{margin-left:245px;width:calc(100% - 245px)}header{height:78px;background:#fff;border-bottom:1px solid #e4e8ef;display:flex;justify-content:space-between;align-items:center;padding:0 30px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#735ae8}header h2{margin:2px 0;font-size:21px}.date{font-size:11px;color:#7c8797}.content{padding:28px 30px}.hero{border-radius:18px;background:linear-gradient(120deg,#191f30,#2e3858);color:#fff;padding:26px 29px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.hero h1{font-size:24px;margin:6px 0}.hero p{margin:0;color:#abb7cb;font-size:12px}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:18px}.stat,.panel{background:#fff;border:1px solid #e3e8ef;border-radius:15px;box-shadow:0 6px 25px #15203308}.stat{padding:17px}.stat span{font-size:10px;color:#7e8999;text-transform:uppercase;font-weight:800}.stat b{display:block;font-size:24px;margin-top:9px}.panel{padding:19px;overflow:hidden}.panel-title h3{margin:0;font-size:16px}.panel-title p{margin:5px 0 12px;color:#8490a0;font-size:11px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th{text-align:left;padding:11px 13px;background:#fafbfd;color:#8994a5;font-size:9px;text-transform:uppercase}td{padding:12px 13px;border-top:1px solid #eef1f5;font-size:11px}td b,td small{display:block}td small{color:#8a95a7;margin-top:3px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.page-head h3{font-size:25px;margin:0}.page-head p{margin:4px 0;color:#7c8899;font-size:12px}.primary,.secondary,.link{border:0;border-radius:9px;padding:10px 13px;font-size:11px;font-weight:800}.primary{background:linear-gradient(135deg,#5b46e8,#846bff);color:#fff}.secondary{background:#eef0f5;color:#586577}.link{background:none;color:#604fe7;padding:6px}.toolbar{display:flex;gap:8px;margin-bottom:12px}.toolbar input,.toolbar select,input,select{border:1px solid #dfe5ed;padding:10px;border-radius:9px;background:#fff;outline:none;font-size:11px}.month-form{display:flex;gap:7px}.form-panel{padding:21px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.form-grid label{font-size:10px;color:#687488;font-weight:800;display:grid;gap:6px}.success,.error{padding:10px 13px;border-radius:9px;margin-bottom:15px;font-size:11px}.success{background:#e9f8f1;color:#12754f}.error{background:#fff0f0;color:#b13737}.cols{display:grid;grid-template-columns:1fr 1fr;gap:17px}.user-row{display:flex;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid #eef1f5}.user-row:last-child{border:0}.grow{flex:1}.pill{display:inline-block;background:#eaf7f1;color:#177952;border-radius:20px;padding:4px 7px;font-size:9px}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 20%,#e9e6ff,transparent 34%),#f6f7fa}.login-card{width:min(400px,92vw);background:#fff;padding:31px;border-radius:20px;border:1px solid #e0e5ed;box-shadow:0 20px 60px #141d2c14}.login-card h1{font-size:28px;margin:12px 0 3px}.login-card>p{font-size:11px;color:#7b8797}.login-card form{display:grid;gap:13px;margin-top:20px}.login-card label{display:grid;gap:6px;font-size:10px;color:#657185;font-weight:800}.login-card button{margin-top:4px}.hint{margin-top:15px;background:#f7f8fb;padding:10px;border-radius:9px;font-size:9px;color:#818c9d;line-height:1.7}@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.hero,.page-head{display:block}.hero .month-form,.page-head .month-form{margin-top:12px}.stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}dialog::backdrop{background:rgba(15,23,42,0.5);backdrop-filter:blur(3px)}
.entry-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 24px rgba(15,23,42,0.05);overflow:hidden;margin-bottom:24px;transition:all 0.2s ease}
.entry-card-header{background:#f8fafc;padding:20px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.entry-card-body{padding:24px}
.entry-meta-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;margin-bottom:20px;display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:16px;align-items:center}
@media(max-width:850px){.entry-meta-box{grid-template-columns:1fr}}
.entry-category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 16px}
.entry-category-card{display:flex;align-items:center;gap:10px;min-height:68px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-align:left;color:#334155;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.entry-category-card:hover{border-color:#a5b4fc;box-shadow:0 4px 14px rgba(15,23,42,.07);transform:translateY(-1px)}
.entry-category-card.is-active{border-color:#6d5ce7;background:#f5f3ff;box-shadow:0 0 0 2px rgba(109,92,231,.12);color:#312e81}
.entry-category-card>span:last-child{display:grid;gap:3px;min-width:0}
.entry-category-card b{font-size:11px;white-space:nowrap}
.entry-category-card small{font-size:9px;color:#64748b;white-space:nowrap}
.entry-category-icon{font-size:20px;line-height:1}
.entry-sections-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
.entry-section[hidden]{display:none!important}
@media(max-width:1100px){.entry-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.entry-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-category-card{padding:10px 8px;gap:7px}}
@media(max-width:850px){.entry-sections-grid{grid-template-columns:1fr}}
.entry-section{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:0 1px 3px rgba(15,23,42,0.02);transition:border-color 0.2s,box-shadow 0.2s}
.entry-section:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,0.04)}
.entry-section.stock-in{border-left:5px solid #10b981}
.entry-section.production{border-left:5px solid #6366f1}
.entry-section.rejection-in{border-left:5px solid #f59e0b}
.entry-section.rejection-out{border-left:5px solid #ea580c}
.entry-section.dispatch{border-left:5px solid #0ea5e9}
.entry-section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f5f9;padding-bottom:10px}
.entry-section-head h4{margin:0;font-size:14px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:8px}
.form-field{display:flex;flex-direction:column;gap:3px}
.form-field label{font-size:11px;font-weight:700;color:#1e293b;display:flex;justify-content:space-between}
.form-field .field-hint{font-size:10.5px;color:#64748b;margin-bottom:2px}
.input-with-unit{position:relative;display:flex;align-items:center}
.input-with-unit input{width:100%;height:38px;padding:8px 50px 8px 12px;font-size:13px;font-weight:600;color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.unit-badge{position:absolute;right:8px;font-size:10px;font-weight:700;color:#475569;background:#f1f5f9;padding:3px 8px;border-radius:6px;pointer-events:none}
.form-field input[type="text"]{height:38px;padding:8px 12px;font-size:12px;color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;background:#fff;width:100%}
.summary-strip{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 20px;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.summary-item{display:flex;flex-direction:column;gap:2px}
.summary-item span{font-size:10px;text-transform:uppercase;color:#64748b;font-weight:700;letter-spacing:0.4px}
.summary-item b{font-size:15px;font-weight:800}
.edit-banner{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:12px 16px;border-radius:10px;margin-bottom:18px;display:none;align-items:center;justify-content:space-between}
.admin-period-panel{margin-bottom:14px}
.admin-period-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.admin-period-tab{display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#475569;text-decoration:none;font-size:11px;font-weight:800}
.admin-period-tab:hover{border-color:#a5b4fc;color:#4338ca}
.admin-period-tab.is-active{background:#5b46e8;border-color:#5b46e8;color:#fff;box-shadow:0 4px 12px #5b46e833}
.admin-movement-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.admin-movement-card{min-width:0;min-height:145px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px;background:#fff;border:1px solid #e3e8ef;border-radius:14px;box-shadow:0 6px 25px #15203308;text-align:left;color:#182230;font-family:inherit;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.admin-movement-card:hover{transform:translateY(-2px);border-color:#a5b4fc;box-shadow:0 9px 24px #15203312}
.admin-movement-card.is-active{border-color:#6d5ce7;background:#f7f5ff;box-shadow:0 0 0 2px #6d5ce71f}
.movement-card-icon{font-size:20px}
.movement-card-label{font-size:10px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.35px}
.admin-movement-card b{font-size:22px;line-height:1.2;color:#172033}
.admin-movement-card small{font-size:9px;color:#8a95a7}
.admin-entry-panel{margin-bottom:18px}
.admin-entry-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.admin-entry-table{min-width:1000px}
.admin-entry-table .qty-in{color:#15803d;font-weight:700}
.admin-entry-row[hidden],.admin-filter-empty[hidden]{display:none!important}
.admin-materials-card{text-decoration:none;color:#182230}
.admin-materials-card:hover{color:#182230}
.admin-material-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.admin-material-toolbar .toolbar{flex-wrap:wrap;margin:0}
.admin-material-toolbar input{min-width:250px}
.admin-material-table{min-width:900px}
.admin-view-link{display:inline-block;text-decoration:none;white-space:nowrap;padding:8px 10px}
.admin-material-detail-panel .admin-material-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid #eef1f5}
.admin-material-filters label{display:grid;gap:5px;color:#687488;font-size:10px;font-weight:800}
.admin-material-filters input,.admin-material-filters select{min-width:150px}
.user-entry-filter-panel{margin-bottom:16px}
.user-entry-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.user-entry-filters label{display:grid;gap:5px;color:#687488;font-size:10px;font-weight:800}
.user-entry-filters select,.user-entry-filters input{min-width:160px}
.user-entry-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:16px}
.user-entry-results .panel-title{margin-bottom:12px}
.user-entry-table{min-width:1100px}
@media(max-width:760px){.user-entry-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.user-entry-filters{align-items:stretch}.user-entry-filters label,.user-entry-filters select,.user-entry-filters input{width:100%}}
.admin-profile-panel{margin-bottom:18px}
.admin-profile-list{display:grid;gap:10px;margin-top:14px;font-size:12px}
.admin-profile-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #f1f5f9;padding-bottom:8px}
.admin-profile-list>div:last-child{border-bottom:0;padding-bottom:0}
.admin-profile-list>div>span:first-child{color:#64748b}
@media(max-width:760px){.admin-movement-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-entry-title{align-items:flex-start}}
input:focus,select:focus,textarea:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,0.12)!important}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* User Account Management Styles */
.users-stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
@media(max-width:900px){.users-stats-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.users-stats-strip{grid-template-columns:1fr}}
.user-stat-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;box-shadow:0 2px 10px rgba(15,23,42,0.03);display:flex;align-items:center;gap:16px}
.user-stat-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.user-stat-info{display:flex;flex-direction:column}
.user-stat-info span{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px}
.user-stat-info b{font-size:22px;font-weight:800;color:#0f172a;line-height:1.2;margin-top:2px}
.users-grid-layout{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}
@media(max-width:1024px){.users-grid-layout{grid-template-columns:1fr}}
.user-panel{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 20px rgba(15,23,42,0.04);overflow:hidden}
.user-panel-header{padding:20px 24px;border-bottom:1px solid #f1f5f9;background:#f8fafc;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.user-panel-header h3{margin:0;font-size:16px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px}
.user-panel-header p{margin:3px 0 0 0;font-size:12px;color:#64748b}
.user-panel-body{padding:24px}
.user-form-vertical{display:flex;flex-direction:column;gap:16px}
.user-form-group{display:flex;flex-direction:column;gap:5px}
.user-form-group label{font-size:12px;font-weight:700;color:#1e293b;display:flex;justify-content:space-between;align-items:center}
.user-form-group .form-hint{font-size:11px;color:#64748b;margin-top:-2px;margin-bottom:2px}
.user-form-group input,.user-form-group select{width:100%;height:42px;padding:10px 14px;font-size:13px;color:#0f172a;border:1px solid #cbd5e1;border-radius:9px;background:#ffffff;transition:all 0.2s ease}
.user-search-input{height:38px;padding:8px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:12px;min-width:220px;outline:none}
.users-list-wrapper{display:flex;flex-direction:column;gap:12px}
.user-card-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border:1px solid #f1f5f9;border-radius:12px;background:#ffffff;transition:all 0.2s ease;gap:16px}
.user-card-item:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,0.04);background:#fafbfd}
.user-avatar-badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:800;color:#ffffff;flex-shrink:0}
.avatar-admin{background:linear-gradient(135deg,#7c3aed,#6366f1)}
.avatar-operator{background:linear-gradient(135deg,#0284c7,#2563eb)}
.user-info-area{display:flex;flex-direction:column;gap:3px;flex-grow:1;min-width:0}
.user-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-name-text{font-size:14px;font-weight:700;color:#0f172a}
.user-email-text{font-size:12px;color:#64748b;word-break:break-all}
.user-meta-pills{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.role-pill-admin{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.role-pill-user{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.status-pill-active{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
.status-pill-disabled{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
.self-badge{background:#f1f5f9;color:#475569;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.user-action-side{display:flex;align-items:center;gap:12px;flex-shrink:0}
.btn-toggle-disable{background:#ffffff;border:1px solid #fca5a5;color:#dc2626;padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:5px}
.btn-toggle-disable:hover{background:#fee2e2;border-color:#ef4444}
.btn-toggle-enable{background:#ffffff;border:1px solid #86efac;color:#16a34a;padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:5px}
.btn-toggle-enable:hover{background:#dcfce7;border-color:#22c55e}
.btn-protected{background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8;padding:6px 12px;border-radius:8px;font-size:10px;font-weight:600;cursor:not-allowed;display:inline-flex;align-items:center;gap:4px}
@media(max-width:600px){.user-card-item{flex-direction:column;align-items:flex-start;gap:12px}.user-action-side{width:100%;justify-content:space-between;border-top:1px solid #f1f5f9;padding-top:10px}}

/* Responsive Navigation Bar & Drawer Styles */
.sidebar nav a.active{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#ffffff;font-weight:700;box-shadow:0 4px 14px rgba(99,102,241,0.35)}
.sidebar-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.65);backdrop-filter:blur(4px);z-index:1040;opacity:0;transition:opacity 0.28s ease}
.sidebar-backdrop.active{display:block;opacity:1}
.sidebar-close-btn{display:none;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#ffffff;font-size:14px;cursor:pointer;align-items:center;justify-content:center;transition:background 0.2s ease}
.sidebar-close-btn:hover{background:rgba(255,255,255,0.22)}
.app-header{height:74px;background:rgba(255,255,255,0.96);border-bottom:1px solid #e4e8ef;display:flex;justify-content:space-between;align-items:center;padding:0 30px;position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.header-left{display:flex;align-items:center;gap:16px}
.header-title-group h2{margin:2px 0 0 0;font-size:20px;font-weight:800;color:#0f172a}
.header-right{display:flex;align-items:center;gap:16px}
.header-user-badge{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;padding:4px 12px 4px 6px;border-radius:20px}
.avatar-small{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#ffffff;font-size:11px;font-weight:800;display:grid;place-items:center}
.user-shortname{font-size:11.5px;font-weight:700;color:#334155}
.menu-toggle-btn{display:none;width:40px;height:40px;border-radius:10px;background:#f8fafc;border:1px solid #cbd5e1;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4.5px;padding:0;transition:all 0.2s ease}
.menu-toggle-btn:hover{background:#f1f5f9;border-color:#94a3b8}
.menu-toggle-btn .bar{display:block;width:18px;height:2.2px;background:#1e293b;border-radius:2px;transition:all 0.2s ease}

/* Responsive Breakpoint: <= 900px */
@media(max-width:900px){
    .menu-toggle-btn{display:flex}
    .sidebar-close-btn{display:flex}
    .sidebar{position:fixed;top:0;bottom:0;left:0;width:275px;max-width:84vw;height:100vh;z-index:1050;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);box-shadow:6px 0 30px rgba(0,0,0,0.45);overflow-y:auto}
    .sidebar.open{transform:translateX(0)}
    .shell{display:block}
    .main{margin-left:0;width:100%}
    .app-header{height:64px;padding:0 16px}
    .header-title-group h2{font-size:17px}
    .content{padding:18px 14px}
}
@media(max-width:600px){
    .date{display:none}
    .header-user-badge .user-shortname{display:none}
    .header-user-badge{padding:3px}
}