.mdt-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0; padding: 16px 18px; border: 1px solid rgba(239, 92, 104, .45); border-radius: 9px; background: rgba(85, 18, 33, .25); }
.mdt-danger-zone strong { color: #ff9aa2; }
.mdt-danger-zone p { margin: 5px 0 0; color: #b88d98; font-size: 11px; }
:root { --mdt-bg: #060821; --mdt-panel: #0b0f2c; --mdt-panel-2: #11163b; --mdt-line: #202653; --mdt-text: #eef0f6; --mdt-muted: #8990b1; --mdt-blue: #6574ed; --mdt-blue-2: #4b5bd0; --mdt-yellow: #bfc1c8; --mdt-red: #ef6674; }
* { box-sizing: border-box; }
body.mdt-body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 88% 0%, #16213b 0, transparent 29rem), var(--mdt-bg); color: var(--mdt-text); font: 14px/1.45 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.mdt-shell { min-height: 100vh; display: flex; }
.mdt-sidebar { width: 194px; flex: 0 0 194px; padding: 22px 9px 14px; border-right: 1px solid var(--mdt-line); background: rgba(5, 8, 15, .92); display: flex; flex-direction: column; }
.mdt-brand { display: flex; gap: 10px; align-items: center; padding: 0 6px 22px; }
.mdt-brand-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; }
.mdt-brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid var(--mdt-yellow); border-radius: 50%; color: var(--mdt-yellow); font-size: 10px; font-weight: 700; }
.mdt-brand strong, .mdt-brand small, .mdt-brand em { display: block; line-height: 1.15; }
.mdt-brand strong { font-size: 13px; }
.mdt-brand small { color: #a7b2c7; font-size: 13px; font-weight: 700; margin-top: 2px; }
.mdt-brand em { color: #63718c; font-size: 9px; font-style: normal; margin-top: 4px; }
.mdt-nav { overflow: auto; }
.mdt-nav-link { display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 0 10px; margin: 4px 0; border: 1px solid transparent; border-radius: 8px; color: #b3bed0; font-weight: 600; transition: .18s ease; }
.mdt-nav-link span { width: 16px; color: #7282a1; text-align: center; font-size: 16px; }
.mdt-nav-icon { display: inline-grid; place-items: center; }
.mdt-nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mdt-nav-link:hover, .mdt-nav-link:focus { border-color: #273a66; background: #101a31; color: #fff; }
.mdt-nav-label { margin: 20px 10px 7px; color: var(--mdt-yellow); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mdt-sidebar-foot { margin-top: auto; padding: 17px 9px 0; color: #687793; font-size: 11px; border-top: 1px solid var(--mdt-line); }
.mdt-status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #42cf8b; box-shadow: 0 0 10px #42cf8b; }
.mdt-content { min-width: 0; flex: 1; }
.mdt-topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 30px; border-bottom: 1px solid rgba(39, 56, 88, .45); }
.mdt-kicker { color: #7c8aaa; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mdt-topbar h1 { margin: 3px 0 0; font: 700 19px 'Space Grotesk', sans-serif; }
.mdt-top-actions, .mdt-user { display: flex; align-items: center; gap: 12px; }
.mdt-user { gap: 8px; }
.mdt-user small, .mdt-user strong { display: block; line-height: 1.2; }
.mdt-user small { color: var(--mdt-muted); font-size: 11px; margin-top: 3px; }
.mdt-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #273970; color: #dce5ff; font-weight: 700; }
.mdt-logout, .mdt-button { border: 1px solid var(--mdt-line); border-radius: 7px; background: #0c1428; color: #c3cee3; padding: 9px 13px; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.mdt-logout:hover, .mdt-button:hover { border-color: #456bd8; color: #fff; }
.mdt-page { padding: 29px 30px 45px; max-width: 1400px; }
.mdt-welcome { margin-bottom: 25px; }
.mdt-welcome h2 { margin: 3px 0; font: 700 28px 'Space Grotesk', sans-serif; }
.mdt-welcome p { margin: 0; color: var(--mdt-muted); }
.mdt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mdt-card { padding: 17px; border: 1px solid var(--mdt-line); border-radius: 9px; background: linear-gradient(150deg, rgba(16, 24, 43, .96), rgba(10, 15, 28, .96)); }
.mdt-card-label { color: #8290aa; font-size: 11px; font-weight: 600; }
.mdt-card-value { display: block; margin-top: 8px; font: 700 26px 'Space Grotesk', sans-serif; }
.mdt-card-note { margin-top: 5px; color: #51c995; font-size: 11px; }
.mdt-section { margin-top: 24px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px; }
.mdt-panel { border: 1px solid var(--mdt-line); border-radius: 9px; background: rgba(10, 16, 29, .78); overflow: hidden; }
.mdt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--mdt-line); }
.mdt-panel-head h3 { margin: 0; font: 600 14px 'Space Grotesk', sans-serif; }
.mdt-panel-head a { color: #7192ff; font-size: 11px; }
.mdt-table { width: 100%; border-collapse: collapse; }
.mdt-table th, .mdt-table td { padding: 13px 17px; border-bottom: 1px solid rgba(27, 41, 67, .7); text-align: left; font-size: 12px; }
.mdt-table th { color: #71809b; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.mdt-table tr:last-child td { border-bottom: 0; }
.mdt-role { display: inline-block; padding: 4px 7px; border-radius: 4px; background: #16264e; color: #90aaff; font-size: 10px; }
.mdt-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 15px; }
.mdt-action { padding: 14px; border: 1px solid var(--mdt-line); border-radius: 7px; background: #0e1628; }
.mdt-action strong, .mdt-action span { display: block; }
.mdt-action strong { font-size: 12px; }
.mdt-action span { margin-top: 4px; color: var(--mdt-muted); font-size: 11px; }
.mdt-empty-state { max-width: 620px; margin: 10vh auto; padding: 45px 30px; border: 1px solid var(--mdt-line); border-radius: 10px; background: rgba(11, 18, 33, .88); text-align: center; }
.mdt-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 22px; border: 1px solid #375bd0; border-radius: 50%; color: #82a0ff; font-size: 25px; }
.mdt-empty-state h2 { margin: 8px 0; font: 700 25px 'Space Grotesk', sans-serif; }
.mdt-empty-state > p:not(.mdt-kicker) { max-width: 430px; margin: 0 auto; color: var(--mdt-muted); }
.mdt-empty-actions { display: flex; justify-content: center; gap: 9px; margin-top: 25px; }
.mdt-button-primary { border-color: #4469dd; background: linear-gradient(135deg, #3f60d8, #2158c8); color: #fff; }
.mdt-button-danger { border-color: rgba(239, 102, 116, .45); color: #ff9aa2; background: rgba(239, 102, 116, .08); }
.mdt-profit { color: #51c995 !important; }
.mdt-form-panel { padding: 18px; }
.mdt-form-panel h3 { margin: 0 0 16px; font: 600 14px 'Space Grotesk', sans-serif; }
.mdt-form-grid textarea, .mdt-form-stack textarea { min-height: 82px; resize: vertical; }
.mdt-form-grid label, .mdt-form-stack label { color: #8290aa; font-size: 11px; font-weight: 600; }
.mdt-form-grid input, .mdt-form-grid select, .mdt-form-grid textarea, .mdt-form-stack input, .mdt-form-stack select, .mdt-form-stack textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #263655; border-radius: 6px; background: #080f20; color: var(--mdt-text); font: inherit; }
.mdt-form-grid .mdt-form-wide { grid-column: 1 / -1; }
.mdt-form-grid input:focus, .mdt-form-grid select:focus, .mdt-form-grid textarea:focus, .mdt-form-stack input:focus { outline: 2px solid #456ce1; outline-offset: 1px; }
.mdt-form-stack { display: grid; gap: 14px; }
.mdt-link { color: #83a0ff; cursor: pointer; font-size: 11px; }
.mdt-action-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #3d56b8; border-radius: 6px; background: #15245d; color: #bfcaff; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.mdt-action-button:hover { border-color: #7185ff; background: #263d99; color: #fff; transform: translateY(-1px); }
.mdt-action-button span { font-size: 14px; line-height: 1; }
.mdt-row-actions { width: 1%; white-space: nowrap; }
.mdt-absence-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.mdt-absence-actions details { display: inline-block; }
.mdt-directory-form { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 6px; min-width: 250px; padding-top: 8px; }
.mdt-directory-form input { width: 100%; padding: 7px; border: 1px solid #263655; border-radius: 5px; background: #080f20; color: var(--mdt-text); font: 11px 'DM Sans', sans-serif; }
.mdt-directory-form button { grid-column: 1 / -1; }
.mdt-table details > form { display: inline-block; margin: 6px 4px 0 0; vertical-align: middle; }
.mdt-table details > form .mdt-button { white-space: nowrap; }
.mdt-modal-open { overflow: hidden; }
.mdt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; }
.mdt-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 15, .78); backdrop-filter: blur(4px); }
.mdt-modal-panel { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(720px, calc(100vh - 44px)); overflow: auto; padding: 24px; border: 1px solid #303a78; border-radius: 10px; background: #0b0f2c; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.mdt-modal-panel h3 { margin: 0 0 18px; font: 600 17px 'Space Grotesk', sans-serif; }
.mdt-modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: #9ba5cc; font-size: 25px; line-height: 1; cursor: pointer; }
.mdt-modal-close:hover { color: #fff; }
.mdt-modal-content > form { display: grid; gap: 12px; }
.mdt-modal-content > form > label { display: grid; gap: 6px; color: #9ba5cc; font-size: 11px; font-weight: 600; }
.mdt-modal-content > form > label input, .mdt-modal-content > form > label select, .mdt-modal-content > form > label textarea { width: 100%; padding: 10px; border: 1px solid #303d70; border-radius: 6px; background: #070b24; color: var(--mdt-text); font: 13px 'DM Sans', sans-serif; }
.mdt-modal-content > form > label input:focus, .mdt-modal-content > form > label select:focus, .mdt-modal-content > form > label textarea:focus { outline: 2px solid #6277ef; outline-offset: 1px; }
.mdt-modal-content > form + form { display: inline-block; width: auto; margin: 12px 6px 0 0; }
.mdt-modal-content > form + form .mdt-button { width: auto; }
.mdt-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.mdt-modal-actions .mdt-button { width: fit-content; min-width: 105px; }
.mdt-modal-content .mdt-directory-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mdt-modal-content .mdt-directory-form .mdt-button { grid-column: auto; }
.mdt-modal-content .mdt-directory-form > .mdt-button { grid-column: 1 / -1; width: fit-content; min-width: 110px; justify-self: start; align-self: start; padding: 9px 16px; }
.mdt-login-body { display: grid; place-items: center; min-height: 100vh; }
.mdt-login { width: min(420px, calc(100% - 30px)); padding: 34px; border: 1px solid var(--mdt-line); border-radius: 10px; background: rgba(11, 18, 33, .9); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.mdt-login-logo { display: block; width: 72px; height: 72px; margin-bottom: 22px; object-fit: cover; border-radius: 50%; }
.mdt-login h1 { margin: 5px 0; font: 700 28px 'Space Grotesk', sans-serif; }
.mdt-login > p:not(.mdt-kicker) { margin: 0 0 24px; color: var(--mdt-muted); }
.mdt-success { margin-bottom: 14px; padding: 10px; border: 1px solid rgba(81, 201, 149, .4); border-radius: 6px; color: #72d9ac; }
.mdt-profile-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 15px; max-width: 820px; }
.mdt-2fa-panel { max-width: 620px; }
.mdt-qr { display: block; width: 210px; height: 210px; margin: 18px auto; border-radius: 8px; background: #fff; padding: 8px; }
.mdt-profile-card { min-height: 250px; padding: 28px; text-align: center; }
.mdt-profile-card h3 { margin: 16px 0 8px; font: 600 18px 'Space Grotesk', sans-serif; }
.mdt-avatar-large { width: 66px; height: 66px; margin: 0 auto; font-size: 24px; }
.mdt-alert { margin: 16px 0; padding: 12px 14px; border: 1px solid rgba(239, 92, 104, .5); border-radius: 7px; background: rgba(239, 92, 104, .1); color: #ff9aa2; }
.mdt-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.mdt-form-grid label { color: #8290aa; font-size: 11px; font-weight: 600; }
.mdt-form-grid input, .mdt-form-grid select, .mdt-table select { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #263655; border-radius: 6px; background: #080f20; color: var(--mdt-text); font: inherit; }
.mdt-form-grid input:focus, .mdt-form-grid select:focus, .mdt-table select:focus { outline: 2px solid #456ce1; outline-offset: 1px; }
@media (max-width: 900px) { .mdt-sidebar { width: 72px; flex-basis: 72px; padding-inline: 7px; } .mdt-brand { justify-content: center; padding-inline: 0; } .mdt-brand > span:last-child, .mdt-nav-link:not(:first-child) { } .mdt-brand > span:last-child, .mdt-nav-link { font-size: 0; } .mdt-nav-link { justify-content: center; padding-inline: 0; } .mdt-nav-link span { font-size: 16px; } .mdt-nav-label, .mdt-sidebar-foot { display: none; } .mdt-page { padding-inline: 18px; } .mdt-grid { grid-template-columns: repeat(2, 1fr); } .mdt-section { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .mdt-profile-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .mdt-form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mdt-topbar { padding-inline: 15px; } .mdt-top-actions .mdt-user > span:last-child { display: none; } .mdt-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .mdt-card { padding: 13px; } .mdt-card-value { font-size: 21px; } .mdt-table th, .mdt-table td { padding-inline: 10px; } .mdt-table th:nth-child(3), .mdt-table td:nth-child(3) { display: none; } .mdt-form-grid { grid-template-columns: 1fr; } }