/* =============================================
   EduManager — Microsoft 365 / Fluent Design
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --m365-blue:        #0078d4;
  --m365-blue-dark:   #005a9e;
  --m365-blue-light:  #eff6fc;
  --m365-blue-mid:    #c7e0f4;
  --neutral-0:    #ffffff;
  --neutral-10:   #faf9f8;
  --neutral-20:   #f3f2f1;
  --neutral-30:   #edebe9;
  --neutral-40:   #e1dfdd;
  --neutral-50:   #d2d0ce;
  --neutral-60:   #c8c6c4;
  --neutral-90:   #a19f9d;
  --neutral-110:  #8a8886;
  --neutral-130:  #605e5c;
  --neutral-150:  #3b3a39;
  --neutral-160:  #323130;
  --neutral-180:  #201f1e;
  --success:      #107c10;
  --success-bg:   #dff6dd;
  --success-border:#57a300;
  --warning-bg:   #fff4ce;
  --warning-border:#c8a600;
  --error:        #a4262c;
  --error-bg:     #fde7e9;
  --error-border: #f1707b;
  --sidebar-bg:   #1b1a19;
  --sidebar-w:    240px;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --shadow-2:  0 1px 2px rgba(0,0,0,0.14),0 0 2px rgba(0,0,0,0.12);
  --shadow-4:  0 2px 4px rgba(0,0,0,0.14),0 0 2px rgba(0,0,0,0.12);
  --shadow-8:  0 4px 8px rgba(0,0,0,0.14),0 0 2px rgba(0,0,0,0.12);
  --shadow-16: 0 8px 16px rgba(0,0,0,0.14),0 0 2px rgba(0,0,0,0.12);
  --shadow-64: 0 32px 64px rgba(0,0,0,0.24),0 0 8px rgba(0,0,0,0.12);
  --radius-sm:2px; --radius:4px; --radius-md:6px; --radius-lg:8px;
  --t:0.15s cubic-bezier(0.1,0.9,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font);font-size:14px;color:var(--neutral-160);background:var(--neutral-20);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--m365-blue);text-decoration:none}
a:hover{text-decoration:underline}

/* TOPBAR */
.topbar{display:none;position:fixed;top:0;left:0;right:0;height:48px;background:var(--m365-blue);color:#fff;align-items:center;padding:0 12px;gap:10px;z-index:200;box-shadow:var(--shadow-4)}
.topbar-title{font-size:16px;font-weight:600;flex:1}
.topbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:6px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:background var(--t)}
.topbar-btn:hover{background:rgba(255,255,255,0.15)}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:150;transition:transform var(--t);overflow:hidden}
.sidebar-header{height:48px;display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.07)}
.sidebar-logo-icon{width:26px;height:26px;background:var(--m365-blue);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-title{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent}
.nav-label{font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.08em;padding:12px 14px 3px;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:10px;padding:0 10px;height:36px;color:rgba(255,255,255,0.8);text-decoration:none;border-radius:var(--radius-md);margin:1px 6px;font-size:13.5px;transition:background var(--t),color var(--t);white-space:nowrap;cursor:pointer;position:relative;border:none;background:none;font-family:var(--font);width:calc(100% - 12px)}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(255,255,255,0.13);color:#fff;font-weight:500}
.nav-item.active::before{content:'';position:absolute;left:-10px;top:6px;bottom:6px;width:3px;background:var(--m365-blue);border-radius:0 2px 2px 0}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.8}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}
.sidebar-footer{border-top:1px solid rgba(255,255,255,0.07);padding:6px 0 8px}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px 14px;color:rgba(255,255,255,0.7);font-size:12.5px}
.sidebar-avatar{width:28px;height:28px;background:var(--m365-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sidebar-username{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:140}
.sidebar-overlay.show{display:block}

/* MAIN */
.app-layout{display:flex;min-height:100vh}
.main-content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.content-area{flex:1;padding:24px 28px;max-width:1400px}

/* PAGE HEADER */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-header h2{font-size:20px;font-weight:600;color:var(--neutral-180);line-height:1.2}
.page-subtitle{font-size:12px;color:var(--neutral-110);margin-top:2px}
.page-header-actions{display:flex;gap:8px;flex-wrap:wrap}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:var(--neutral-0);border:1px solid var(--neutral-40);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-2);position:relative;overflow:hidden;transition:box-shadow var(--t),transform var(--t)}
.stat-card:hover{box-shadow:var(--shadow-8);transform:translateY(-1px)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--m365-blue)}
.stat-card.green::before{background:var(--success)}
.stat-card.amber::before{background:#c8a600}
.stat-card.red::before{background:var(--error)}
.stat-icon{width:34px;height:34px;background:var(--m365-blue-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:var(--m365-blue)}
.stat-card.green .stat-icon{background:var(--success-bg);color:var(--success)}
.stat-card.amber .stat-icon{background:var(--warning-bg);color:#8a6914}
.stat-card.red .stat-icon{background:var(--error-bg);color:var(--error)}
.stat-num{font-size:26px;font-weight:700;color:var(--neutral-180);line-height:1;margin-bottom:3px}
.stat-label{font-size:11.5px;color:var(--neutral-110)}

/* CARD */
.card{background:var(--neutral-0);border:1px solid var(--neutral-40);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden;margin-bottom:16px}
.card-header{padding:11px 18px;border-bottom:1px solid var(--neutral-30);background:var(--neutral-10);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:12px;font-weight:600;color:var(--neutral-130);text-transform:uppercase;letter-spacing:0.05em}
.card-body{padding:16px 18px}

/* TABLE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead tr{background:var(--neutral-10);border-bottom:2px solid var(--neutral-40)}
.table th{text-align:left;padding:9px 14px;font-size:11px;font-weight:600;color:var(--neutral-130);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap}
.table td{padding:9px 14px;border-bottom:1px solid var(--neutral-30);vertical-align:middle;color:var(--neutral-160)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover td{background:var(--neutral-10)}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-prijavljen{background:var(--success-bg);color:#107c10;border:1px solid #a7d7a7}
.badge-prijavljen::before{background:#107c10}
.badge-na_cekanju{background:var(--warning-bg);color:#8a6914;border:1px solid #e0c040}
.badge-na_cekanju::before{background:#c8a600}
.badge-otkazano{background:var(--error-bg);color:var(--error);border:1px solid #f1c0c3}
.badge-otkazano::before{background:var(--error)}
.badge-open{background:var(--m365-blue-light);color:var(--m365-blue);border:1px solid var(--m365-blue-mid)}
.badge-open::before{background:var(--m365-blue)}
.badge-locked{background:var(--neutral-20);color:var(--neutral-110);border:1px solid var(--neutral-50)}
.badge-locked::before{background:var(--neutral-90)}
.badge-poslano{background:var(--success-bg);color:#107c10;border:1px solid #a7d7a7}
.badge-poslano::before{background:#107c10}
.badge-greska{background:var(--error-bg);color:var(--error);border:1px solid #f1c0c3}
.badge-greska::before{background:var(--error)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;height:32px;border:1px solid var(--neutral-50);border-radius:var(--radius);background:var(--neutral-0);color:var(--neutral-160);font-size:13.5px;font-family:var(--font);font-weight:400;cursor:pointer;text-decoration:none;transition:background var(--t),border-color var(--t),box-shadow var(--t);white-space:nowrap;user-select:none}
.btn:hover{background:var(--neutral-20);border-color:var(--neutral-90);text-decoration:none}
.btn:active{background:var(--neutral-30);transform:scale(0.99)}
.btn-primary{background:var(--m365-blue);color:#fff;border-color:var(--m365-blue);font-weight:600}
.btn-primary:hover{background:var(--m365-blue-dark);border-color:var(--m365-blue-dark);color:#fff}
.btn-success{background:var(--success);color:#fff;border-color:var(--success);font-weight:600}
.btn-success:hover{background:#0a6209;border-color:#0a6209;color:#fff}
.btn-danger{background:var(--error-bg);color:var(--error);border-color:var(--error-border)}
.btn-danger:hover{background:#f9d0d3}
.btn-warning{background:var(--warning-bg);color:#7a5c00;border-color:var(--warning-border)}
.btn-warning:hover{background:#fff0b0}
.btn-sm{height:26px;padding:0 10px;font-size:12px}
.w-full{width:100%;justify-content:center}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--neutral-160);margin-bottom:4px}
.form-hint{font-size:11px;color:var(--neutral-110);margin-top:3px}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="datetime-local"],input[type="file"],select,textarea{width:100%;padding:5px 10px;height:32px;border:1px solid var(--neutral-60);border-radius:var(--radius);font-size:13.5px;font-family:var(--font);background:var(--neutral-0);color:var(--neutral-180);transition:border-color var(--t),box-shadow var(--t);outline:none}
textarea{height:auto;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--neutral-110)}
input:focus,select:focus,textarea:focus{border-color:var(--m365-blue);box-shadow:0 0 0 1px var(--m365-blue)}
input[type="file"]{padding:4px 8px;height:auto;cursor:pointer}
select{cursor:pointer}
.form-actions{margin-top:16px;display:flex;gap:8px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--neutral-30)}

/* ALERTS */
.alert{padding:10px 14px;border-radius:var(--radius-md);margin-bottom:16px;font-size:13px;border-left:4px solid transparent;background:var(--neutral-10);border:1px solid var(--neutral-40)}
.alert-success{background:var(--success-bg);color:#0a5c0a;border-color:var(--success-border);border-left-color:var(--success)}
.alert-danger{background:var(--error-bg);color:var(--error);border-color:var(--error-border);border-left-color:var(--error)}
.alert-warning{background:var(--warning-bg);color:#7a5c00;border-color:var(--warning-border);border-left-color:#c8a600}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);animation:overlayIn 0.15s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--neutral-0);border-radius:var(--radius-lg);width:500px;max-width:100%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-64);animation:modalIn 0.2s cubic-bezier(0.1,0.9,0.2,1)}
@keyframes modalIn{from{transform:scale(0.95) translateY(-8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--neutral-30);flex-shrink:0}
.modal-head span{font-size:16px;font-weight:600;color:var(--neutral-180)}
.modal-close{background:none;border:none;width:32px;height:32px;border-radius:var(--radius);cursor:pointer;color:var(--neutral-110);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background var(--t),color var(--t)}
.modal-close:hover{background:var(--neutral-20);color:var(--neutral-160)}
#modal-body{padding:20px;overflow-y:auto;flex:1}

/* PROGRESS */
.progress{height:4px;background:var(--neutral-30);border-radius:2px;overflow:hidden;margin-top:4px;width:100%;max-width:120px}
.progress-fill{height:100%;background:var(--m365-blue);border-radius:2px;transition:width 0.4s ease}
.progress-fill.green{background:var(--success)}
.progress-fill.amber{background:#c8a600}
.progress-fill.red{background:var(--error)}

/* FILTER BAR */
.filter-bar{background:var(--neutral-0);border:1px solid var(--neutral-40);border-radius:var(--radius-lg);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;box-shadow:var(--shadow-2)}
.filter-bar select,.filter-bar input[type="text"]{width:auto;min-width:140px;height:28px;padding:0 8px;font-size:13px}
.filter-bar .btn{height:28px;padding:0 12px;font-size:12.5px}
.filter-label{font-size:12px;font-weight:600;color:var(--neutral-110);white-space:nowrap}

/* FILE DROP */
.file-drop{border:2px dashed var(--neutral-50);border-radius:var(--radius-lg);padding:24px;text-align:center;cursor:pointer;transition:border-color var(--t),background var(--t);background:var(--neutral-10)}
.file-drop:hover{border-color:var(--m365-blue);background:var(--m365-blue-light)}
.file-drop-title{font-size:13px;font-weight:600;color:var(--neutral-130);margin-top:8px}
.file-drop-hint{font-size:11.5px;color:var(--neutral-90);margin-top:3px}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* TOAST */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:5000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-item{background:var(--neutral-180);color:#fff;padding:11px 16px;border-radius:var(--radius-md);font-size:13.5px;box-shadow:var(--shadow-16);display:flex;align-items:center;gap:10px;min-width:240px;max-width:360px;pointer-events:auto;transform:translateX(120%);opacity:0;transition:transform 0.3s cubic-bezier(0.1,0.9,0.2,1),opacity 0.3s}
.toast-item.show{transform:translateX(0);opacity:1}
.toast-item.hiding{transform:translateX(120%);opacity:0}
.toast-item.success{background:#107c10}
.toast-item.warning{background:#8a6914}
.toast-item.error{background:#a4262c}

/* LOGIN */
.login-body{min-height:100vh;background:var(--neutral-20);display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--neutral-0);border:1px solid var(--neutral-40);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:400px;box-shadow:var(--shadow-8)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo-icon{width:48px;height:48px;background:var(--m365-blue);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.login-logo h1{font-size:22px;font-weight:700;color:var(--neutral-180);margin-bottom:3px}
.login-logo p{font-size:13px;color:var(--neutral-110)}
.login-divider{height:1px;background:var(--neutral-30);margin:20px 0}
.login-footer{margin-top:18px;text-align:center;font-size:12.5px;color:var(--neutral-110)}
.login-footer a{color:var(--m365-blue)}

/* PUBLIC PAGE */
.pub-wrap{max-width:660px;margin:0 auto;padding:24px 16px}
.pub-header-bar{background:var(--m365-blue);color:#fff;border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:20px}
.pub-header-bar h1{font-size:20px;font-weight:600}
.pub-header-bar p{font-size:13px;opacity:0.8;margin-top:2px}
.edu-termin-card{background:var(--neutral-0);border:1px solid var(--neutral-40);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:10px;cursor:pointer;transition:border-color var(--t),box-shadow var(--t),transform var(--t);text-decoration:none;display:block;color:inherit;box-shadow:var(--shadow-2)}
.edu-termin-card:hover{border-color:var(--m365-blue);box-shadow:var(--shadow-8);transform:translateY(-1px);text-decoration:none}
.edu-termin-card-title{font-size:15px;font-weight:600;color:var(--neutral-180);margin-bottom:5px}
.edu-termin-card-meta{font-size:12.5px;color:var(--neutral-110);display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}

/* MISC */
.empty{padding:32px 20px;text-align:center;color:var(--neutral-90);font-size:13.5px}
.empty-icon{font-size:32px;margin-bottom:8px;opacity:0.5}
code{background:var(--neutral-20);border:1px solid var(--neutral-40);padding:1px 5px;border-radius:var(--radius-sm);font-size:12px;font-family:'Cascadia Code','Consolas',monospace}
.text-muted{color:var(--neutral-110)}
.text-small{font-size:12px}
.fw-600{font-weight:600}
.divider{height:1px;background:var(--neutral-30);margin:16px 0}
.info-box{background:var(--m365-blue-light);border:1px solid var(--m365-blue-mid);border-radius:var(--radius-md);padding:10px 14px;font-size:12.5px;color:var(--neutral-160);margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--neutral-20);border:1px solid var(--neutral-40);border-radius:16px;font-size:12px;color:var(--neutral-160);margin:2px}

/* RESPONSIVE */
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:768px){
  .topbar{display:flex}
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-64)}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0;padding-top:48px}
  .content-area{padding:16px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .page-header{margin-bottom:14px}
  .page-header-actions{width:100%}
  .page-header-actions .btn{flex:1;justify-content:center}
  .filter-bar select,.filter-bar input[type="text"]{min-width:0;flex:1}
  .modal{max-height:90vh}
  .table td,.table th{padding:8px 10px}
  .hide-mobile{display:none}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px 14px}
  .stat-num{font-size:22px}
  .stat-icon{width:28px;height:28px;margin-bottom:8px}
  .login-card{padding:24px 18px}
}
@media print{
  .sidebar,.topbar,.page-header-actions,.btn,.filter-bar{display:none!important}
  .main-content{margin-left:0!important}
  .card{box-shadow:none;border:1px solid #ddd}
}