/* Mitel Training – styles.css (with Light/Dark theme support) */

/* Dark Theme (default) */
:root,
:root[data-theme="dark"]{
    --bg:#222222;
    --card:#222222;
    --fg:#e5e7eb;
    --muted:#9ca3af;
    --accent:#3b82f6;
    --border:#474747;
    --text-color: #ffffff;
    --nav-bg: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    --nav-text-color: #ffffff;
    --nav-hover-bg: #00a1e0;
    --nav-active-bg: #0073d0;
    --iframe-border-color: #474747;
    --menu-border: #2d2d2d;
    --input-bg: #373736;
    --btn-bg: #373736;

    --menu-width-expanded: 240px;
    --menu-width-collapsed: 60px;
    --transition-speed: 0.3s;
}

/* Light Theme */
:root[data-theme="light"]{
    --bg:#ffffff;
    --card:#f5f5f5;
    --fg:#1a1a1a;
    --muted:#6b7280;
    --accent:#0073d0;
    --border:#e0e0e0;
    --text-color: #1a1a1a;
    --nav-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --nav-text-color: #1a1a1a;
    --nav-hover-bg: #00a1e0;
    --nav-active-bg: #0073d0;
    --iframe-border-color: #d1d5db;
    --menu-border: #e5e7eb;
    --input-bg: #ffffff;
    --btn-bg: #f5f5f5;

    --menu-width-expanded: 240px;
    --menu-width-collapsed: 60px;
    --transition-speed: 0.3s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:12px/1 Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    display:flex;
    flex-direction:column;
}

/* Header */
.site-header{
    display:flex; align-items:center; gap:12px;
    padding:10px 16px;
    border-bottom:0.1px solid var(--border);
    background:var(--bg);
    position:sticky; top:0; z-index:10;
}
.header-left{display:flex; align-items:center; gap:10px}
.logo{height:32px; object-fit:contain}
.site-title{margin:0; flex:1; text-align:center; font-weight:600; font-size:20px}
.header-right{display:flex; align-items:center; gap:10px}
#activeUser.ok{color:#10b981}

/* Buttons */
.btn,.icon-btn{
    border:1px solid var(--border);
    background:var(--nav-active-bg); color:#fff;
    padding:8px 12px; border-radius:10px; cursor:pointer;
}
.btn.primary{background:var(--accent); border-color:transparent}
.btn.warn{background:#b91c1c; border-color:transparent}
.btn:hover,.icon-btn:hover{filter:brightness(1.08)}

/* Layout (grid) */
.layout{
    flex:1;
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:0;
}
.layout.collapsed{grid-template-columns:0 1fr}

.side-menu-header {
    padding-bottom: 0.5rem;
    border-bottom: 0.1px solid var(--nav-active-bg);
    background: var(--bg);
}

.side-menu-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nav-active-bg);
    text-align: auto;
    padding:10px 10px;
    border:solid 0.1px var(--border);
    background:var(--input-bg);
    border-radius:2px;
    box-shadow: 0 2px 5px rgba(0,0,0,.7);
}
/* Side menu */
.side-menu{
    background:var(--bg);
    border:1px solid var(--border);
    padding:12px;
    overflow-y:auto;
    transition:padding .25s ease, width .25s ease, background .25s ease, border-right-color .25s ease;
}
.side-menu ul{list-style:none; margin:0; padding:0}
.side-menu li{margin-top:6px; margin-bottom:6px; background:var(--bg)}

.submenu-toggle,.side-menu a{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    padding:10px 10px;
    border-radius:2px;
    border:solid 0.01px var(--border);
    background:var(--input-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,.7);
    color:var(--fg);
    font-size:16px;
    cursor:pointer;
    text-decoration:none;
    transition: background 0.2s ease, transform 0.1s ease;
}

.side-menu a:hover,
.submenu-toggle:hover,
.submenu-toggle.active{
    background:var(--nav-active-bg);
    color:#ffffff;
    transform: translateX(2px);
}

.submenu-toggle{
    font-weight:700;
    position:relative;
}
.submenu-toggle::after{
    content:"▼";
    position:absolute;
    right:4px;
    transition:transform .2s ease;
    color:var(--nav-active-bg);
}
.submenu-toggle.active::after{
    transform:rotate(90deg);
    color:#fdb714;
}

.submenu{
    margin-left:10px;
    margin-top:4px;
    padding-left:8px;
}
.submenu.hidden{display:none}

.side-menu a.is-current{
    background:rgba(59,130,246,.25);
    outline:1px solid rgba(59,130,246,.35);
}

/* Remove any visible trace of the side-menu when collapsed */
.layout.collapsed .side-menu{
    border-right:0 !important;
    padding:0 !important;
    margin:0 !important;
    width:0 !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Main column */
.main-content{
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    overflow:hidden;
}

/* Frame area */
.main-frame{
    width:100%;
    flex:1;
    min-height:0;
    border:0.1px solid var(--border);
    border-radius:4px;
    background:var(--bg);
}

/* Login card */
.login-card{
    max-width:400px;
    margin:0 auto;
    background:var(--input-bg);
    border:0.1px solid gray;
    border-radius:8px;
    padding:16px;
    box-shadow: 0 4px 8px var(--border);
}
.field{display:flex; flex-direction:column; margin-bottom:12px}
label{margin-bottom:6px; color:#cbd5e1}
input,select{
    border:0.1px solid var(--border);
    background:#fff;
    color:black;
    padding:10px;
    border-radius:8px;
}
.msg{color:#f59e0b; min-height:18px}

/* Modal */
.modal.hidden{display:none !important}
.modal{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    z-index:1000;
}
.modal__backdrop{
    position:absolute;
    inset:0;
    background:var(--bg);
    backdrop-filter:blur(2px);
}
.modal__card{
    position:relative;
    width:min(500px,96vw);
    max-height:90vh;
    overflow:auto;
    background:var(--input-bg);
    border:0.1px solid var(--border);
    border-radius:5px;
    padding:14px;
}
.modal__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:0.1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:12px;
}
.modal__section{margin:12px 0}

/* Footer */
.site-footer{
    padding:4px 8px;
    border-top:0.1px solid var(--border);
    color:var(--muted);
    text-align:center;
}

/* Utility */
.hidden{display:none !important}

/* Icon theme support - Invert white icons in light mode */
:root[data-theme="light"] .ico {
    filter: brightness(0) saturate(100%);
}
/* On hover in light mode, turn icons white */
:root[data-theme="light"] .side-menu a:hover .ico,
:root[data-theme="light"] .submenu-toggle:hover .ico,
:root[data-theme="light"] .submenu-toggle.active .ico {
    filter: brightness(0) invert(1);
}
/* Active submenu items stay white */
.submenu a.active,
.submenu a[aria-current="page"] {
    color: #ffffff;
}
/* Main logo uses dual images, no filter needed */
:root[data-theme="light"] #mainLogo {
    filter: none;
}

/* Blocked groups (for students) */
.side-menu .blocked-group{
    opacity: 0.35;
    pointer-events: none;
}

/* Blocked items inside an allowed group */
.side-menu a.blocked{
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(70%);
}