@charset "UTF-8";
/* Shared page details: loaded by the edited pages, alongside portal.css. */
@font-face {
    font-family: NeoSans;
    src: url('https://eservices.ammanu.edu.jo/Careers/Academic/assets/fonts/NEOSANSARABIC-Medium.ttf') format('truetype');
    font-display: swap
}

:root {
    --navy: #102951;
    --navy-dark: #0b203e;
    --blue: #244b91;
    --gold: #d5a329;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e3e9f1;
    --bg: #f5f7fb
}

.ut-page, .ut-standalone {
    font-family: NeoSans,Tahoma,Arial,sans-serif;
    line-height: 1.85;
    color: var(--ink)
}

    .ut-page h1, .ut-page h2, .ut-page h3, .ut-standalone h1, .ut-standalone h2 {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        letter-spacing: 0
    }

    .ut-page h1 {
        font-size: clamp(24px,2.3vw,31px);
        margin-bottom: 14px
    }

        .ut-page h1 > .page-icon {
            width: 46px;
            height: 46px;
            flex-basis: 46px;
            padding: 11px;
            border-radius: 14px;
            background: #edf3fd;
            color: var(--blue)
        }

.page-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle
}

.ut-page h2 > .page-icon, .ut-page h3 > .page-icon {
    color: var(--blue)
}

.ut-page .hero h1 > .page-icon {
    background: #ffffff16;
    color: #e9c66d
}

.ut-page .hero h2 > .page-icon {
    color: #fff
}

.ut-page .eyebrow {
    letter-spacing: .8px;
    font-size: 11px;
    color: #8d6815
}

.ut-page .hero .eyebrow {
    color: #f0d58f
}

.ut-page .page-subtitle {
    font-size: 13px;
    line-height: 1.9;
    max-width: 800px;
    margin-bottom: 26px
}

.ut-page .card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: 0 6px 18px #0f172a08
}

    .ut-page .card + .card {
        margin-top: 20px
    }

    .ut-page .card h2 {
        font-size: 19px;
        margin-bottom: 18px
    }

    .ut-page .card h3 {
        font-size: 16px
    }

.ut-page .card-intro {
    line-height: 1.95;
    font-size: 13px;
    margin-top: 0
}

.ut-page .section-row {
    align-items: center
}

    .ut-page .section-row h2 {
        margin-bottom: 0
    }

.ut-page .field label {
    font-weight: 500;
    color: #334761
}

.ut-page .control {
    border: 1px solid #d7e0ec;
    border-radius: 10px;
    min-height: 46px;
    padding: 11px 13px;
    background: #fff
}

.ut-page textarea.control {
    min-height: 110px;
    line-height: 1.8
}

.ut-page .control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px #244b9116
}

.ut-page .control[readonly] {
    background: #f5f7fb
}

.ut-page .control[dir=ltr] {
    font-family: Tahoma,Arial,sans-serif
}

.ut-page .form-grid, .ut-page .filter-grid {
    gap: 20px
}

.ut-page .filter-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.page-filter-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

    .page-filter-heading > .page-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        padding: 9px;
        border-radius: 12px;
        background: #edf3fd;
        color: var(--blue)
    }

    .page-filter-heading h2 {
        margin: 0 0 4px !important
    }

    .page-filter-heading p {
        margin: 0;
        color: var(--muted);
        font-size: 12px
    }

.ut-page .form-footer {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    margin-bottom: 0;
    gap: 12px
}

.ut-page .btn {
    gap: 8px;
    min-height: 44px;
    font-weight: 500;
    border-radius: 10px
}

.ut-page a.btn, .ut-page .ut-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

    .ut-page a.btn .page-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px
    }

    .ut-page a.btn > span {
        min-width: 0
    }

.ut-page .stage-card {
    position: relative;
    gap: 8px;
    box-shadow: 0 6px 18px #0f172a06;
    border-top: 3px solid #bdcce2;
    transition: box-shadow .18s,border-color .18s
}

    .ut-page .stage-card:hover {
        border-color: var(--gold);
        box-shadow: 0 12px 25px #10295112
    }

    .ut-page .stage-card h2 {
        margin: 8px 0
    }

    .ut-page .stage-card strong {
        font-family: Tahoma,Arial,sans-serif;
        color: var(--navy)
    }

.ut-page .table-wrap, .page-table-region {
    overflow-x: auto;
    max-width: 100%;
    border-radius: 12px
}

.ut-page .table-wrap {
    border: 1px solid var(--line)
}

.ut-page .data {
    width: 100%;
    font-size: 13px
}

    .ut-page .data th {
        background: #eef3fa;
        color: var(--navy);
        font-weight: 500;
        white-space: nowrap
    }

    .ut-page .data td {
        padding: 14px 12px;
        vertical-align: middle
    }

    .ut-page .data th, .ut-page .data td {
        border-bottom: 1px solid var(--line)
    }

    .ut-page .data tbody tr:hover td {
        background: #f8faff
    }

    .ut-page .data a {
        display: inline-block;
        padding: 5px 8px;
        border-radius: 7px;
        color: var(--blue);
        background: #edf3fd;
        font-size: 12px
    }

        .ut-page .data a:hover {
            background: #e1eafa;
            text-decoration: none
        }

.ut-page .definition {
    gap: 0 24px
}

    .ut-page .definition > div {
        padding: 12px 0;
        border-bottom: 1px solid #edf1f7
    }

    .ut-page .definition dt {
        font-size: 12px;
        color: var(--muted)
    }

    .ut-page .definition dd {
        margin: 5px 0 12px;
        line-height: 1.8
    }

        .ut-page .definition dd:empty::after {
            content: '—';
            color: #94a3b8
        }

.page-context-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 24px;
    border: 1px solid #d8e4f5;
    border-radius: 12px;
    background: #f2f6fd;
    color: #36527d;
    font-size: 13px
}

    .page-context-note > .page-icon {
        margin-top: 3px;
        color: var(--blue)
    }

.ut-page .consent {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    background: #f5f7fb;
    border: 1px solid var(--line)
}

    .ut-page .consent > span {
        margin: 0
    }

    .ut-page .consent label {
        margin-inline-start: 7px
    }

.ut-page .decision-box {
    border-top: 4px solid var(--gold);
    background: #fffefa
}

.page-decision-actions .btn.danger {
    margin-inline-start: auto
}

.page-flow {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px
}

    .page-flow li {
        padding: 13px 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #f5f8fc;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px
    }

    .page-flow b {
        display: grid;
        place-items: center;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        background: var(--navy);
        color: #fff;
        font-family: Arial,sans-serif
    }

.ut-page .ut-request {
    max-width: none
}

    .ut-page .ut-request .ut-nav {
        gap: 9px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff
    }

        .ut-page .ut-request .ut-nav a {
            border: 0;
            background: #edf3fd;
            color: var(--navy);
            border-radius: 9px;
            font-size: 12px;
            padding: 10px 13px
        }

            .ut-page .ut-request .ut-nav a:hover {
                background: #dfe9f8
            }

    .ut-page .ut-request section {
        scroll-margin-top: 20px
    }

    .ut-page .ut-request .ut-file {
        background: #fbfcff
    }

.ut-page .request {
    padding: 24px;
    border-inline-start: 4px solid #bdcce2;
    box-shadow: 0 4px 15px #10295105
}

    .ut-page .request:hover {
        border-inline-start-color: var(--gold)
    }

.ut-page .request-meta {
    padding: 16px;
    background: #f7f9fc;
    border-radius: 12px
}

.ut-page .stats .symbol {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px
}

    .ut-page .stats .symbol > .page-icon {
        width: 23px;
        height: 23px
    }

.ut-page .badge {
    font-size: 12px;
    padding: 5px 12px
}

.ut-page .alert {
    line-height: 1.9
}

.ut-page .pager {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: space-between
}

    .ut-page .pager > .page-button {
        min-width: 105px
    }

.page-button {
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px 18px !important;
    padding-inline-start: 43px !important;
    padding-inline-end: 18px !important
}

.ut-standalone .login-page {
    background: #f5f7fb
}

.ut-standalone .login-story {
    background: linear-gradient(135deg,#102951,#17376c 55%,#244b91);
    border-top: 5px solid var(--gold);
    padding: 60px 7vw;
    justify-content: center
}

    .ut-standalone .login-story .brand {
        margin-bottom: 30px
    }

.ut-standalone .brand strong {
    font-size: 21px
}

.ut-standalone .brand small {
    margin-top: 7px
}

.ut-standalone .aau-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    background: #ffffff12 !important;
    border: 1px solid #ffffff40;
    border-radius: 18px;
    padding: 8px
}

    .ut-standalone .aau-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block
    }

.ut-standalone .login-story h1 {
    display: block;
    font-size: clamp(28px,3.5vw,43px);
    line-height: 1.7;
    font-weight: 500
}

    .ut-standalone .login-story h1 > .page-icon {
        display: none
    }

.ut-standalone .login-story p {
    color: #e2e9f5;
    font-size: 14px;
    line-height: 2
}

.ut-standalone .login-story .feature {
    align-items: center;
    color: #e7edf8
}

    .ut-standalone .login-story .feature > .page-icon {
        color: #f0d58f
    }

.ut-standalone .login-content {
    padding: 42px 30px;
    background: #f5f7fb
}

.page-login-card {
    max-width: 480px !important;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 21px;
    box-shadow: 0 12px 38px #1029510a
}

    .page-login-card h2 {
        font-size: 25px;
        margin: 10px 0
    }

    .page-login-card > p.muted {
        font-size: 13px
    }

.page-login-symbol {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #edf3fd;
    color: var(--blue);
    margin-bottom: 18px
}

    .page-login-symbol > .page-icon {
        width: 27px;
        height: 27px
    }

.page-login-card .eyebrow {
    letter-spacing: 0;
    font-size: 12px;
    color: #8d6815
}

.page-login-card .radio-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px
}

    .page-login-card .radio-list td {
        padding: 10px 9px;
        background: #f5f7fb;
        border: 1px solid var(--line);
        border-radius: 9px;
        font-size: 12px;
        vertical-align: middle
    }

    .page-login-card .radio-list input {
        accent-color: var(--blue);
        vertical-align: middle
    }

    .page-login-card .radio-list label {
        padding-inline-start: 5px;
        cursor: pointer
    }

.page-login-card legend {
    font-size: 12px;
    margin-bottom: 8px
}

.page-login-card .control {
    min-height: 48px;
    border-radius: 10px
}

.page-login-card .page-button {
    background-color: var(--blue);
    border-color: var(--blue)
}

.page-login-card .footer {
    margin-top: 24px;
    padding-top: 18px;
    font-size: 11px
}

.page-login-card .login-note {
    line-height: 1.9
}

.page-download {
    max-width: 760px;
    padding-top: 60px
}

.page-download-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    color: var(--navy)
}

    .page-download-brand img {
        object-fit: contain
    }

.page-download .card {
    padding: 30px;
    border-top: 4px solid var(--gold)
}

.page-download h1 {
    font-size: 25px
}

    .page-download h1 .page-icon {
        width: 30px;
        height: 30px;
        color: var(--blue)
    }

@media(max-width:1100px) {
    .ut-page .filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ut-standalone .login-story {
        padding: 42px 35px
    }

    .page-login-card {
        padding: 26px
    }
}

@media(max-width:720px) {
    .ut-page .card {
        padding: 20px 16px
    }

    .ut-page h1 {
        font-size: 24px
    }

        .ut-page h1 > .page-icon {
            width: 40px;
            height: 40px;
            flex-basis: 40px;
            padding: 10px
        }

    .ut-page .filter-grid {
        grid-template-columns: 1fr
    }

    .ut-page .form-footer {
        align-items: stretch
    }

        .ut-page .form-footer > .btn {
            flex: 1 1 100%;
            width: 100%
        }

    .ut-page .page-decision-actions .btn.danger {
        margin-inline-start: 0
    }

    .page-flow {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ut-page .ut-request .ut-nav {
        flex-wrap: nowrap;
        overflow-x: auto
    }

        .ut-page .ut-request .ut-nav a {
            flex-shrink: 0
        }

    .ut-page .stats .symbol {
        display: none
    }

    .ut-page .request {
        padding: 18px
    }

    .ut-page .pager > .page-button {
        min-width: 0
    }

    .page-login-card {
        padding: 25px 20px;
        box-shadow: none
    }

    .ut-standalone .login-content {
        padding: 24px 16px
    }

    .ut-standalone .login-story {
        padding: 26px 24px
    }

        .ut-standalone .login-story .brand {
            margin-bottom: 0
        }

    .ut-standalone .brand strong {
        font-size: 17px
    }

    .ut-standalone .aau-logo {
        width: 60px;
        height: 60px;
        flex-basis: 60px
    }

    .ut-standalone .login-story h1 {
        font-size: 28px
    }

    .ut-standalone .login-story .eyebrow {
        margin-top: 20px !important
    }

    .page-download {
        padding: 30px 16px
    }
}

@media(prefers-reduced-motion:reduce) {
    .ut-page * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

@media print {
    .ut-page .page-icon, .ut-page .page-filter-heading, .ut-page .page-flow, .ut-page .ut-nav, .ut-page .form-footer {
        display: none !important
    }

    .ut-page .card {
        box-shadow: none;
        border-color: #ccc
    }

    .page-table-region {
        overflow: visible
    }
}

.page-button.icon-file {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8ZM14%202v6h6M8%2013h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-file {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8ZM14%202v6h6M8%2013h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-users {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M16%203a4%204%200%200%201%200%208M22%2021v-2a4%204%200%200%200-3-3.87M13%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-users {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M16%203a4%204%200%200%201%200%208M22%2021v-2a4%204%200%200%200-3-3.87M13%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-building {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V7l8-4%208%204v14M2%2021h20M9%2021v-5h6v5M8%209h1M15%209h1M8%2012h1M15%2012h1%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-building {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V7l8-4%208%204v14M2%2021h20M9%2021v-5h6v5M8%209h1M15%209h1M8%2012h1M15%2012h1%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-search {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2021l-5-5M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-search {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2021l-5-5M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-flow {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v5M5%2015v-3h14v3M2%2015h6v6H2ZM16%2015h6v6h-6ZM9%201h6v6H9Z%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-flow {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v5M5%2015v-3h14v3M2%2015h6v6H2ZM16%2015h6v6h-6ZM9%201h6v6H9Z%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v5l3%202M22%2012a10%2010%200%201%201-20%200%2010%2010%200%200%201%2020%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v5l3%202M22%2012a10%2010%200%201%201-20%200%2010%2010%200%200%201%2020%200%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-add {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-add {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-back {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-back {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-upload {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V3m-5%205%205-5%205%205M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-upload {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V3m-5%205%205-5%205%205M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v13m-5-5%205%205%205-5M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v13m-5-5%205%205%205-5M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-save {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h12l4%204v12a2%202%200%200%201-2%202ZM7%203v6h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-save {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h12l4%204v12a2%202%200%200%201-2%202ZM7%203v6h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-mail {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3ZM3%205l9%207%209-7%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-mail {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3ZM3%205l9%207%209-7%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-close {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-close {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-key {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%207a5%205%200%201%201-4%208l-7%207H1v-3l7-7a5%205%200%200%201%206-5ZM16%209h.01%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-key {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%207a5%205%200%201%201-4%208l-7%207H1v-3l7-7a5%205%200%200%201%206-5ZM16%209h.01%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%203%206v6c0%205%209%2010%209%2010s9-5%209-10V6ZM8%2012l3%203%205-6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%203%206v6c0%205%209%2010%209%2010s9-5%209-10V6ZM8%2012l3%203%205-6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-refresh {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207a9%209%200%201%200%201%209M20%202v6h-6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-refresh {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207a9%209%200%201%200%201%209M20%202v6h-6%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.icon-arrow {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E")
}

.page-button.secondary.icon-arrow {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23244b91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-6-6%206%206-6%206%22%2F%3E%3C%2Fsvg%3E")
}

/* Supervisor pages: specific overrides preserve student and staff layouts. */
.ut-supervisor .page-heading {
    margin-bottom: 20px
}

    .ut-supervisor .page-heading h1 {
        margin: 0
    }

.ut-supervisor .card {
    overflow: visible
}

.ut-supervisor .page-table-region {
    margin-top: 10px
}

    .ut-supervisor .page-table-region .table-wrap {
        border: 0
    }

.ut-supervisor .actions {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

    .ut-supervisor .actions > .btn {
        min-width: 130px
    }

.ut-supervisor .inline-form {
    gap: 14px
}

    .ut-supervisor .inline-form > .field {
        min-width: 160px
    }

.ut-supervisor .shortcut-grid > a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px #10295106
}

    .ut-supervisor .shortcut-grid > a:hover {
        background: #f8faff;
        border-color: #bdcce2;
        text-decoration: none
    }

.ut-supervisor .shortcut-grid .page-shortcut-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    background: #edf3fd;
    color: var(--blue);
    border-radius: 13px
}

    .ut-supervisor .shortcut-grid .page-shortcut-icon > .page-icon {
        width: 23px;
        height: 23px
    }

.ut-supervisor .shortcut-grid .page-shortcut-copy {
    min-width: 0
}

    .ut-supervisor .shortcut-grid .page-shortcut-copy strong {
        margin: 0 0 7px
    }

    .ut-supervisor .shortcut-grid .page-shortcut-copy > span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.8
    }

.ut-supervisor .page-dashboard-stats .stat {
    position: relative;
    padding-inline-end: 50px;
    border-top-color: #bdcce2
}

    .ut-supervisor .page-dashboard-stats .stat:first-child {
        border-top-color: var(--gold)
    }

    .ut-supervisor .page-dashboard-stats .stat::after {
        content: '';
        position: absolute;
        inset-inline-end: 17px;
        top: 22px;
        width: 23px;
        height: 23px;
        background: var(--blue);
        mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M3 3h7v7H3zm11 0h7v7h-7zM3 14h7v7H3zm11 0h7v7h-7z"/%3E%3C/svg%3E') center/contain no-repeat
    }

    .ut-supervisor .page-dashboard-stats .stat strong {
        font-family: Tahoma,Arial,sans-serif;
        color: var(--navy)
    }

.ut-supervisor .request-nav {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    gap: 8px;
    margin-bottom: 22px
}

    .ut-supervisor .request-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 13px;
        font-size: 12px
    }

.ut-supervisor .request-heading {
    border-inline-start: 4px solid var(--gold);
    background: #fff;
    border-radius: 14px
}

    .ut-supervisor .request-heading h2 {
        margin-bottom: 8px
    }

.ut-supervisor .page-score-total {
    background: #edf3fd;
    border: 1px solid #d8e4f5;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--navy)
}

    .ut-supervisor .page-score-total output {
        font-family: Tahoma,Arial,sans-serif;
        font-size: 24px
    }

.ut-supervisor .page-print-action {
    text-align: end;
    margin: 0 0 20px
}

    .ut-supervisor .page-print-action > .btn {
        font-size: 12px
    }

.ut-supervisor .filters .section-head {
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    margin-bottom: 22px
}

    .ut-supervisor .filters .section-head h2 {
        margin: 0
    }

.ut-supervisor .form-grid + .btn {
    margin-top: 20px
}

.ut-supervisor .field + .form-grid {
    margin-top: 18px
}

.ut-supervisor .btn.danger {
    background-color: #ad3345;
    border-color: #ad3345;
    color: #fff
}

    .ut-supervisor .btn.danger:hover {
        background-color: #872638
    }

.ut-supervisor .page-table-region .data {
    min-width: 600px
}

.ut-supervisor .details {
    padding: 8px 0
}

    .ut-supervisor .details > div {
        padding: 10px 0;
        border-bottom: 1px solid #edf1f7
    }

    .ut-supervisor .details dd {
        overflow-wrap: anywhere
    }

.ut-supervisor .account-card {
    border-top: 3px solid #bdcce2
}

    .ut-supervisor .account-card h3 {
        align-items: flex-start
    }

@media(max-width:760px) {
    .ut-supervisor .page-heading {
        margin-bottom: 18px
    }

    .ut-supervisor .actions > .btn {
        flex: 1 1 100%;
        width: 100%
    }

    .ut-supervisor .inline-form {
        align-items: stretch
    }

        .ut-supervisor .inline-form > .btn {
            width: 100%
        }

    .ut-supervisor .form-grid + .btn {
        width: 100%
    }

    .ut-supervisor .request-nav {
        overflow-x: auto;
        flex-wrap: nowrap
    }

        .ut-supervisor .request-nav a {
            flex-shrink: 0
        }

    .ut-supervisor .page-dashboard-stats .stat {
        padding-inline-end: 17px
    }

        .ut-supervisor .page-dashboard-stats .stat::after {
            display: none
        }

    .ut-supervisor .page-print-action {
        text-align: start
    }
}

@media print {
    .ut-supervisor .page-print-action, .ut-supervisor .page-dashboard-stats .stat::after {
        display: none
    }

    .ut-supervisor .page-table-region .data {
        min-width: 0
    }
}

/* Trainer portal: six training views; no change to attendance/evaluation rules. */
.ut-trainer-shell {
    --navy: #102951;
    --navy-2: #17376c;
    --teal: #244b91;
    --gold: #d5a329;
    font-family: NeoSans,Tahoma,Arial,sans-serif
}

    .ut-trainer-shell .sidebar {
        background: linear-gradient(180deg,#102951,#17376c);
        border-top: 4px solid var(--gold)
    }

    .ut-trainer-shell .topbar {
        background: linear-gradient(110deg,#102951,#17376c 55%,#244b91);
        border-top: 5px solid var(--gold);
        color: #fff
    }

    .ut-trainer-shell .topbar-label {
        color: #e2e9f5
    }

    .ut-trainer-shell .avatar {
        background: #ffffff18;
        color: #fff
    }

    .ut-trainer-shell .text-button, .ut-trainer-shell .menu-toggle {
        color: #fff;
        background: #ffffff12;
        border: 1px solid #ffffff40;
        min-height: 42px;
        border-radius: 9px
    }

    .ut-trainer-shell .sidebar .brand {
        gap: 12px
    }

    .ut-trainer-shell .aau-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        flex: 0 0 60px;
        padding: 7px;
        background: #ffffff12;
        border: 1px solid #ffffff35;
        border-radius: 14px
    }

        .ut-trainer-shell .aau-logo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain
        }

    .ut-trainer-shell .main-nav > a {
        gap: 10px
    }

    .ut-trainer-shell .topbar .page-button {
        padding-inline-start: 39px !important
    }

    .ut-trainer-shell .sidebar .page-icon {
        width: 19px;
        height: 19px;
        flex: 0 0 19px
    }

.ut-trainer .page-heading {
    margin-bottom: 24px
}

    .ut-trainer .page-heading h1 {
        margin-bottom: 0
    }

    .ut-trainer .page-heading > .btn {
        font-size: 12px
    }

.ut-trainer .card {
    overflow: visible
}

.ut-trainer .field {
    margin-bottom: 18px
}

    .ut-trainer .field:last-child {
        margin-bottom: 0
    }

.ut-trainer .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 20px
}

    .ut-trainer .actions > .btn {
        min-width: 145px
    }

.ut-trainer .btn.danger {
    background-color: #ad3345;
    border-color: #ad3345;
    color: #fff
}

    .ut-trainer .btn.danger:hover {
        background-color: #872638
    }

.ut-trainer .page-table-region {
    margin: 10px 0
}

    .ut-trainer .page-table-region .table-wrap {
        border: 0
    }

    .ut-trainer .page-table-region .data {
        min-width: 600px
    }

.ut-trainer .page-account-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
    align-items: start
}

    .ut-trainer .page-account-grid .card {
        margin-top: 0
    }

.ut-trainer .account-email {
    display: block;
    direction: ltr;
    text-align: start;
    padding: 13px 15px;
    margin: 16px 0 22px;
    background: #edf3fd;
    border: 1px solid #d8e4f5;
    border-radius: 10px;
    color: var(--blue);
    font-family: Tahoma,Arial,sans-serif;
    overflow-wrap: anywhere
}

.ut-trainer .request-nav {
    background: #fff;
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 14px;
    gap: 8px;
    margin-bottom: 22px
}

    .ut-trainer .request-nav a {
        padding: 10px 13px;
        font-size: 12px
    }

.ut-trainer .request-heading {
    background: #fff;
    border-inline-start: 4px solid var(--gold);
    border-radius: 14px
}

.ut-trainer .details > div {
    padding: 10px 0;
    border-bottom: 1px solid #edf1f7
}

.ut-trainer .details dd {
    overflow-wrap: anywhere
}

.ut-trainer .attendance-days {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin: 20px 0
}

.ut-trainer .day-card {
    padding: 16px;
    background: #f7f9fd;
    border: 1px solid #dce5f1;
    border-top: 3px solid #bdcce2;
    border-radius: 12px
}

    .ut-trainer .day-card > span:first-child {
        display: block;
        direction: ltr;
        text-align: right;
        font-family: Tahoma,Arial,sans-serif;
        font-size: 14px;
        color: var(--navy);
        margin-bottom: 12px
    }

    .ut-trainer .day-card .control {
        margin-top: 8px;
        font-family: Tahoma,Arial,sans-serif
    }

.ut-trainer .period-label {
    display: block;
    margin: 18px 0;
    padding: 12px 15px;
    background: #edf3fd;
    border-radius: 10px;
    color: var(--navy)
}

.ut-trainer .page-trainer-total {
    padding: 15px 20px;
    background: #edf3fd;
    border: 1px solid #d8e4f5;
    border-radius: 12px;
    margin: 22px 0;
    color: var(--navy)
}

    .ut-trainer .page-trainer-total output {
        font-family: Tahoma,Arial,sans-serif;
        font-size: 24px
    }

.ut-trainer .page-danger-zone {
    padding: 20px 0 0;
    margin-top: 28px;
    border-top: 1px solid #edd7dc
}

.ut-trainer .criteria-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}

.ut-trainer .criterion {
    padding: 18px;
    background: #fbfcff;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .ut-trainer .criterion > label {
        font-size: 14px;
        line-height: 1.9;
        color: var(--navy);
        unicode-bidi: plaintext
    }

    .ut-trainer .criterion > small {
        color: var(--muted);
        font-size: 11px
    }

    .ut-trainer .criterion > .control {
        max-width: 140px;
        margin-top: auto;
        font-family: Tahoma,Arial,sans-serif
    }

.ut-trainer .survey-point {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfcff;
    margin-bottom: 16px
}

    .ut-trainer .survey-point h3 {
        display: block;
        font-size: 15px;
        line-height: 1.9;
        margin: 0 0 18px;
        color: var(--navy);
        unicode-bidi: plaintext;
        text-align: start
    }

    .ut-trainer .survey-point .form-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 16px
    }

    .ut-trainer .survey-point .field {
        margin-bottom: 0
    }

.ut-trainer .form-grid + .btn {
    margin-top: 20px
}

.ut-trainer .page-trainer-stats .stat {
    border-top: 3px solid #bdcce2
}

    .ut-trainer .page-trainer-stats .stat:first-child {
        border-top-color: var(--gold)
    }

    .ut-trainer .page-trainer-stats .stat strong {
        font-family: Tahoma,Arial,sans-serif;
        color: var(--navy)
    }

.ut-trainer-login .login-form {
    padding: 42px 30px;
    background: #f5f7fb
}

.ut-trainer-login .login-layout {
    background: #f5f7fb
}

.ut-trainer-login .login-story {
    justify-content: space-between;
    gap: 45px
}

    .ut-trainer-login .login-story > small {
        color: #d5dff0
    }

    .ut-trainer-login .login-story .brand small {
        color: #d5dff0
    }

.ut-trainer-login .page-login-card > .field {
    margin-top: 22px
}

.ut-trainer-login .page-login-card .badge {
    color: #244b91;
    background: #edf3fd
}

.ut-trainer-login .login-note {
    font-size: 12px;
    line-height: 1.9;
    color: var(--muted);
    margin-top: 20px
}

.ut-trainer-login .page-login-back {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    color: var(--blue);
    font-size: 12px
}

.page-trainer-login-footer {
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
    margin-top: 24px;
    font-size: 11px;
    text-align: center;
    color: var(--muted)
}

@media(max-width:1100px) {
    .ut-trainer .page-account-grid {
        grid-template-columns: 1fr
    }

    .ut-trainer .attendance-days {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .ut-trainer-shell .topbar {
        height: 73px
    }

    .ut-trainer-shell .sidebar {
        top: 73px;
        height: calc(100dvh - 73px)
    }

    .ut-trainer .criteria-list {
        grid-template-columns: 1fr
    }

    .ut-trainer .attendance-days {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ut-trainer .day-card {
        padding: 13px
    }

    .ut-trainer .actions > .btn {
        width: 100%;
        flex: 1 1 100%
    }

    .ut-trainer .request-nav {
        flex-wrap: nowrap;
        overflow-x: auto
    }

        .ut-trainer .request-nav a {
            flex-shrink: 0
        }

    .ut-trainer .survey-point {
        padding: 16px
    }

        .ut-trainer .survey-point .form-grid {
            grid-template-columns: 1fr
        }

    .ut-trainer-login .login-form {
        padding: 24px 16px
    }

    .ut-trainer-login .login-story {
        gap: 20px
    }

    .ut-trainer .form-grid + .btn {
        width: 100%
    }
}

@media(max-width:350px) {
    .ut-trainer .attendance-days {
        grid-template-columns: 1fr
    }
}

@media print {
    .ut-trainer .page-table-region .data {
        min-width: 0
    }

    .ut-trainer-shell .topbar {
        display: none
    }
}

/* Wider work areas and wrapping tables. Keep horizontal overflow as a last-resort
   fallback on narrow screens; never clip columns or actions. */
@media screen {
    body .main, body .workspace > .main, body.student-portal .main {
        max-width: none;
        width: 100%;
        min-width: 0;
        padding-inline: 22px
    }

    .ut-page {
        width: 100%;
        min-width: 0;
        max-width: none
    }

        .ut-page .card {
            min-width: 0;
            padding-inline: 20px
        }

        .ut-page .table-wrap, .ut-page .page-table-region, .ut-page .ut-scroll {
            width: 100%;
            max-width: 100%;
            min-width: 0
        }

            .ut-page table.data, .ut-page .page-table-region table, .ut-page .page-table-region table.data, .ut-page .ut-scroll > table {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                table-layout: auto
            }

                .ut-page table.data th, .ut-page table.data td, .ut-page .page-table-region th, .ut-page .page-table-region td, .ut-page .ut-scroll th, .ut-page .ut-scroll td {
                    white-space: normal;
                    overflow-wrap: anywhere;
                    word-break: normal;
                    min-width: 0;
                    max-width: none;
                    padding: 11px 8px;
                    line-height: 1.8;
                    vertical-align: top
                }

        .ut-page .data td:has(.btn) {
            white-space: normal
        }

        .ut-page .data td a, .ut-page .page-table-region td a {
            max-width: 100%;
            white-space: normal;
            overflow-wrap: anywhere
        }

        .ut-page .data td .btn, .ut-page .page-table-region td .btn {
            min-width: 0;
            max-width: 100%;
            padding: 7px 10px;
            font-size: 12px
        }

        .ut-page .data td .control, .ut-page .page-table-region td .control {
            min-width: 0;
            max-width: 100%
        }
}

@media screen and (min-width:1500px) {
    body .main, body .workspace > .main, body.student-portal .main {
        padding-inline: 26px
    }
}

@media screen and (max-width:760px) {
    body .main, body .workspace > .main, body.student-portal .main {
        padding-inline: 14px
    }

    .ut-page .card {
        padding-inline: 14px
    }
}

/* UniversityTraining responsive layer — 2026-11-01.
   Screen only: official print layouts retain their existing rules. */
@media screen {
    .layout, .shell, .workspace, .main, .ut-page, .admin-shell { min-width:0; }
    body .main, body .workspace > .main, body.student-portal .main { width:100%; max-width:none; box-sizing:border-box; }
    .main img, .admin-shell img { max-width:100%; height:auto; }
    .main .card, .main .request, .main .field, .main .stat, .main .account-card,
    .main .form-grid > *, .main .filter-grid > *, .main .details > *, .main .definition > * { min-width:0; }
    .main .control, .admin-shell .control { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
    .main textarea.control { resize:vertical; }
    .main select.control { text-overflow:ellipsis; }
    .main input[type="file"], .admin-shell input[type="file"] { max-width:100%; min-width:0; width:100%; }
    .main .inline-form > .field { min-width:0; flex:1 1 220px; }
    .main h1, .main h2, .main h3, .main dd, .main .alert, .main .readonly,
    .main .file-item, .main .account-email, .main .page-subtitle { overflow-wrap:anywhere; }
    .main .page-heading, .main .section-head, .main .pager, .main .file-item { flex-wrap:wrap; }
    .main .page-heading > *, .topbar .brand, .topbar .user, .topbar .top-user { min-width:0; max-width:100%; }
    .topbar .brand strong, .topbar .user, .topbar .top-user { overflow-wrap:anywhere; }
    .topbar .avatar, .topbar .aau-logo, .topbar .menu-toggle { flex-shrink:0; }
    .main .btn, .main .row-link, .main .danger-link { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
    .sidebar .main-nav { min-height:0; overscroll-behavior:contain; }
    .sidebar { min-width:0; }
    .main .table-wrap, .main .page-table-region, .main .ut-scroll, .admin-shell .table-wrap {
        min-width:0; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    .main table.data, .main .page-table-region table.data, .main .ut-scroll > table,
    .ut-page .page-table-region table.data, .admin-shell table.data {
        width:100%; min-width:0; max-width:100%; table-layout:auto;
    }
    .main table.data th, .main table.data td, .admin-shell table.data th, .admin-shell table.data td,
    .ut-page .page-table-region table.data th, .ut-page .page-table-region table.data td {
        min-width:0; max-width:none; white-space:normal; overflow-wrap:anywhere;
        word-break:normal; vertical-align:top; line-height:1.8;
    }
    .main table.data td:has(.btn), .main table.data td .badge { white-space:normal; }
    .main table.data td .control { min-width:0; max-width:100%; }
    .main .request-nav, .ut-supervisor .request-nav, .ut-trainer .request-nav {
        display:flex; flex-wrap:wrap; overflow:visible; max-width:100%;
    }
    .main .request-nav a { min-width:0; white-space:normal; text-align:center; }
}
@media screen and (min-width:761px) {
    body .main, body .workspace > .main, body.student-portal .main { padding-inline:22px; }
}
@media screen and (max-width:1100px) and (min-width:641px) {
    .main .form-grid, .main .filter-grid, .ut-page .form-grid, .ut-page .filter-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media screen and (max-width:760px) {
    body .main, body .workspace > .main, body.student-portal .main { padding:22px 14px 32px; }
    .main .card, .main .request, .ut-page .card { padding:20px 14px; }
    .main .page-heading { align-items:flex-start; gap:12px; }
    .main .page-heading h1 { font-size:24px; line-height:1.6; }
    .main .control, .admin-shell .control, .login-box .control, .page-login-card .control {
        font-size:16px; min-height:46px;
    }
    .main .btn, .main .page-heading > .btn, .main .pager .btn,
    .main .file-item .btn, .main .data td .btn, .ut-page .page-table-region td .btn {
        font-size:14px; min-height:44px; padding:10px 14px; line-height:1.6;
    }
    .main .data td a, .main .row-link, .main .danger-link { font-size:14px; padding-block:9px; }
    .main .pager { gap:12px; font-size:13px; }
    .main .data td small { font-size:13px; }
    .topbar .top-user .user-label { display:inline; }
    .layout .sidebar .navlink { min-height:44px; font-size:14px; }
    .main .form-footer, .main .actions { gap:10px; flex-wrap:wrap; }
    .main .form-footer > .btn, .main .actions > .btn { flex:1 1 180px; min-width:0; }
    .main .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .main .stat { padding:16px 12px; }
    .main .stat small, .main .stat > span { font-size:12px; }
    .main .request-nav, .ut-supervisor .request-nav, .ut-trainer .request-nav {
        flex-wrap:wrap; overflow:visible; gap:8px; padding:10px;
    }
    .main .request-nav a, .ut-supervisor .request-nav a, .ut-trainer .request-nav a {
        flex:1 1 calc(50% - 8px); min-width:0; min-height:44px; padding:10px 8px;
        font-size:13px; display:flex; align-items:center; justify-content:center;
    }
    .main .details, .main .definition { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .main .details dt, .main .definition dt { font-size:13px; }
    .main .details dd, .main .definition dd { font-size:15px; }
    .main .page-account-grid, .main .account-grid, .main .shortcut-grid,
    .ut-trainer .page-account-grid, .ut-supervisor .page-account-grid { grid-template-columns:minmax(0,1fr); }
    .main .attendance-days, .ut-trainer .attendance-days { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .main .criteria-list, .ut-trainer .criteria-list { grid-template-columns:minmax(0,1fr); }
    .main .survey-point .form-grid, .ut-trainer .survey-point .form-grid { grid-template-columns:minmax(0,1fr); }
    .main .criterion > .control { max-width:100%; }
    .shell .topbar, .ut-trainer-shell .topbar { height:auto; min-height:73px; padding:12px 14px; flex-wrap:wrap; }
    .shell .topbar .user { margin-inline-start:auto; flex-wrap:wrap; }
    .shell .sidebar, .ut-trainer-shell .sidebar {
        top:var(--ut-topbar-height,73px); width:min(280px,calc(100vw - 24px));
        height:calc(100vh - var(--ut-topbar-height,73px));
        height:calc(100dvh - var(--ut-topbar-height,73px)); overflow-y:auto;
    }
    .shell .sidebar .main-nav > a { min-height:44px; font-size:14px; }
    .login-page, .login-layout { display:block; min-width:0; }
    .login-content, .login-form, .ut-trainer-login .login-form { padding:26px 16px; min-width:0; }
    .login-box, .page-login-card { width:100%; max-width:100%; min-width:0; }
    .login-story { padding:26px 18px; }
    .login-box .radio-list, .login-box .radio-list tbody, .login-box .radio-list tr { display:block; width:100%; }
    .login-box .radio-list td { display:block; width:100%; padding:8px 0; }
    .main input[type="checkbox"], .main input[type="radio"] { width:20px; height:20px; vertical-align:middle; }

    /* Enabled only after JavaScript has verified and labelled a simple data table. */
    .main table.data[data-ut-mobile-cards], .ut-page table.data[data-ut-mobile-cards],
    .admin-shell table.data[data-ut-mobile-cards] {
        display:block; width:100%; min-width:0; border:0; background:transparent; border-collapse:separate;
    }
    table.data[data-ut-mobile-cards] > tbody, table.data[data-ut-mobile-cards] > tfoot { display:block; width:100%; }
    table.data[data-ut-mobile-cards] > thead,
    table.data[data-ut-mobile-cards] tr.ut-mobile-header {
        position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
        clip:rect(0,0,0,0); clip-path:inset(50%); border:0;
    }
    .main table.data[data-ut-mobile-cards] tr.ut-mobile-record,
    .ut-page table.data[data-ut-mobile-cards] tr.ut-mobile-record {
        display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
        width:100%; min-width:0; margin:0 0 14px; border:1px solid var(--line,#e3e9f1);
        border-radius:12px; background:#fff; overflow:visible;
    }
    .main table.data[data-ut-mobile-cards] tr.ut-mobile-record > td,
    .ut-page table.data[data-ut-mobile-cards] tr.ut-mobile-record > td {
        display:block; width:auto; min-width:0; max-width:none; padding:12px;
        border:0; border-bottom:1px solid var(--line,#e3e9f1); white-space:normal;
        overflow-wrap:anywhere; font-size:14px; line-height:1.8; text-align:start;
    }
    table.data[data-ut-mobile-cards] tr.ut-mobile-record > td::before {
        content:attr(data-ut-label); display:block; color:var(--navy,#102951);
        font-size:13px; font-weight:bold; line-height:1.6; margin-bottom:6px;
    }
    table.data[data-ut-mobile-cards] tr.ut-mobile-record > td[data-ut-label=""]::before { display:none; }
    table.data[data-ut-mobile-cards] tr.ut-mobile-message { display:block; width:100%; }
    .main table.data[data-ut-mobile-cards] tr.ut-mobile-message > td {
        display:block; width:100%; padding:14px; white-space:normal; overflow-wrap:anywhere;
    }
    table.data[data-ut-mobile-cards] tr.ut-mobile-message > td::before { display:none; }
    .main table.data[data-ut-mobile-cards] td a { max-width:100%; }
}
@media screen and (max-width:640px) {
    .main .form-grid, .main .filter-grid, .ut-page .form-grid, .ut-page .filter-grid,
    .main .assignment-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .main .form-footer, .main .actions { align-items:stretch; }
    .main .form-footer > .btn, .main .actions > .btn { flex-basis:100%; width:100%; }
    .main .file-item { align-items:flex-start; }
    .main .file-item > * { min-width:0; max-width:100%; }
    .layout .sidebar { flex-wrap:wrap; overflow:visible; }
    .layout .sidebar #adminLinks { display:flex; flex-wrap:wrap; min-width:0; }
    .layout .sidebar .navlink { white-space:normal; min-width:0; max-width:100%; }
}
@media screen and (max-width:480px) {
    .main .details, .main .definition, .main .request-meta { grid-template-columns:minmax(0,1fr); }
    .main .steps { gap:6px; }
    .main .steps li { min-width:0; padding:10px 5px; overflow-wrap:anywhere; }
    .main table.data[data-ut-mobile-cards] tr.ut-mobile-record,
    .ut-page table.data[data-ut-mobile-cards] tr.ut-mobile-record { grid-template-columns:minmax(0,1fr); }
    .main .page-heading > .btn { width:100%; }
}
@media screen and (max-width:360px) {
    .main .stats, .main .attendance-days, .ut-trainer .attendance-days { grid-template-columns:minmax(0,1fr); }
}