/* Project-specific bits on top of the admin theme (assets/css/app.css). */

/*
 * System font — Helvetica Neue LT GEO from assets/fonts (the only family in the
 * theme that carries Georgian glyphs). One family name, three real weights, so
 * the theme's font-weight: 300/400/500/600/700 all land on a proper face.
 */
@font-face {
    font-family: 'Helvetica Neue GEO';
    src: url(../fonts/HelveticaNeueLTGEO-45Light_0.otf) format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue GEO';
    src: url(../fonts/HelveticaNeueLTGEO-55Roman_0.otf) format('opentype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue GEO';
    src: url(../fonts/HelveticaNeueLTGEO-75Bold_0.otf) format('opentype');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

/* Company logo — assets/images/taati-logo.png. */
.taati-logo-img {
    width: auto;
    height: 44px;
}

.taati-logo-img-sm {
    height: 36px;
}

.taati-logo-img-lg {
    height: 96px;
}

/* Below 992px the theme drops the logo box to `width: auto` with no padding,
   which leaves the mark stuck to the edge of the screen. */
@media (max-width: 991.98px) {
    .logo-box {
        padding-left: 15px;
    }
}

/* Company logo used instead of an avatar photo. */
.taati-avatar {
    object-fit: cover;
}

.page-title-main {
    font-size: 18px;
    font-weight: 600;
}

/* Filter bar above every list. */
.filter-box {
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
}

.filter-box .form-group {
    margin-bottom: 0;
}

/* Attendance / menu rows edited straight in the table. */
.table-editable td {
    vertical-align: middle !important;
}

.table-editable .form-control,
.table-editable .custom-select {
    min-width: 110px;
}

/* Teacher note cards in the parent cabinet. */
.record-card .record-photos img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 3px;
    margin: 0 6px 6px 0;
    cursor: pointer;
}

.record-photo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 6px 6px 0;
    color: #adb5bd;
    background-color: #f1f3fa;
    border-radius: 3px;
}

/* admin/records — the note photos listed in the row, opened in the gallery */
.record-thumbs img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 3px;
    margin: 4px 4px 0 0;
    cursor: pointer;
}

/* The group's daily routine (CKEditor) on the parent's card. */
.daily-routine {
    overflow-x: auto;
}

.daily-routine table {
    width: 100% !important;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.daily-routine th,
.daily-routine td {
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

/* The sidebar sits on the brand colour — keep the user box readable on it. */
.left-side-menu .user-box h5 {
    color: #fff;
}

.left-side-menu .user-box .text-muted {
    color: rgba(255, 255, 255, .75) !important;
}

/* The theme's grey section heading disappears on the brand background. */
#sidebar-menu .menu-title {
    color: rgba(255, 255, 255, .75);
}

/*
 * The theme's click ripple (.waves-ripple) is a dark radial gradient that is
 * never clipped — overflow: hidden is commented out in app.css — so on the
 * light header it smears across the bar. Kill it there.
 */
.navbar-custom .waves-ripple {
    display: none;
}

.navbar-custom .nav-link:focus,
.navbar-custom .dropdown-toggle:focus {
    outline: 0;
    box-shadow: none;
}

/* One height for inputs, selects and buttons, so filter rows line up.
   The -sm variants keep the theme's own (already matching) sizes. */
.form-control:not(textarea):not(.form-control-sm),
.custom-select:not(.custom-select-sm),
.btn:not(.btn-sm) {
    height: 45px;
}

/* Vertical padding gives way to the fixed height; flex keeps the label centred
   in the <a class="btn"> buttons too. */
.btn:not(.btn-sm) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 700px) {
    .form-control:not(textarea):not(.form-control-sm),
    .custom-select:not(.custom-select-sm),
    .btn:not(.btn-sm) {
        height: 40px;
    }
}

/* The theme zeroes the padding of .modal-header and .modal-body, so the box
   itself has to carry it; the footer only keeps its top gap and border. */
.modal-content {
    padding: 20px 24px;
}

.modal-content .modal-header {
    position: relative;
    margin-bottom: 15px;
}

/* The theme hangs the close button 40px above the box, as a blue square whose
   padding pushes the × off its centre. It sits at the right end of the header
   instead, level with the centred title, with the × in the middle of it; the
   title keeps clear of it on both sides so it stays centred. */
.modal-content .modal-header .modal-title {
    padding: 0 40px;
}

.modal-content .modal-header .close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.modal-content .modal-header .close:hover,
.modal-content .modal-header .close:focus {
    color: #fff;
}

.modal-content .modal-footer {
    padding: 15px 0 0;
}

/* The administrator's bell: the theme cuts every line of an item short, which
   swallows the parent's and the child's names — they wrap instead. */
.notification-list .notify-item .notify-details {
    white-space: normal;
}

/* The theme sets the sidebar icons to 9px, far smaller than the 16px labels. */
#sidebar-menu > ul > li > a i {
    width: 22px;
    font-size: 18px;
    line-height: 1;
}

/* ------------------------------------------------------------------ phone ---
 * The theme is drawn for a desktop admin panel; below Bootstrap's `md` the same
 * pages have to work on a phone held in one hand. The theme's own breakpoint
 * (max-width: 767.98px) already collapses the sidebar and the top bar, so these
 * rules only deal with what is left: boxes that waste width, headings that
 * fight their action button, and tables too wide to squash.
 */
@media (max-width: 767.98px) {
    .card-box {
        padding: 18px 15px;
        margin-bottom: 15px;
    }

    .filter-box {
        padding: 12px 15px;
        margin-bottom: 15px;
    }

    /* Heading and its action button stack instead of sharing one line. */
    .page-title-box .page-title-right {
        float: none !important;
        margin-top: 10px;
    }

    .page-title-box .page-title-right .btn {
        width: 100%;
    }

    .page-title-box .page-title {
        float: none;
        white-space: normal;
        line-height: 1.35;
    }

    /* Wide lists scroll sideways rather than shrink into unreadable columns. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Only the list tables — the two-column info tables (.table-sm) stay put. */
    .table-responsive > .table-centered {
        min-width: 640px;
    }

    .table-responsive > .table-editable {
        min-width: 760px;
    }

    /*
     * .nav-grid-sm — four tabs on one screen instead of a sideways scroll: a
     * two-by-two grid with the icon above its label. Needs the label wrapped in
     * a <span> so the icon can be put on its own line.
     */
    .nav-grid-sm {
        flex-wrap: wrap;
    }

    .nav-grid-sm .nav-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* An odd tab out (the parent card's fifth) takes the whole last row. */
    .nav-grid-sm .nav-item:last-child:nth-child(odd) {
        flex-basis: 100%;
        max-width: 100%;
    }

    .nav-grid-sm .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        padding: 8px 4px !important;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
    }

    .nav-grid-sm .nav-link i {
        margin: 0 0 4px !important;
        font-size: 17px;
    }

    /* The theme's 40px gap under the tabs is a desktop measurement. */
    .tab-content {
        padding-top: 20px;
    }

    /* Dashboard figures: the unit under the number instead of beside it. */
    .card-box h3 {
        font-size: 20px;
    }

    .card-box h3 small {
        display: block;
        margin-top: 2px;
        font-size: 13px;
    }

    /* Form footers: full-width buttons are easier to hit than a right rail.
       btn-sm is left alone — those are the icon buttons inside table rows. */
    .text-right > .btn:not(.btn-sm),
    .text-right > a.btn:not(.btn-sm) {
        display: flex;
        width: 100%;
        margin: 0 0 8px !important;
    }

    /* A long account name would push the language switcher off the bar. */
    .navbar-custom .pro-user-name {
        display: inline-block;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .navbar-custom .topnav-menu .nav-link {
        padding: 0 10px;
    }

    .taati-logo-img {
        height: 34px;
    }

    /* Photo thumbnails in the note cards. */
    .record-photo-empty,
    .record-card .record-photos img {
        width: 70px;
        height: 70px;
    }

    .modal-content {
        padding: 15px;
    }

    .taati-logo-img-lg {
        height: 72px;
    }

    /*
     * .table-stack — a read-only list that becomes one card per row instead of
     * scrolling sideways: the header row is dropped and every cell prints its
     * own label from data-label. Add the class to the <table> and a data-label
     * to each <td> whose meaning is not obvious on its own.
     */
    .table-responsive > .table-stack {
        min-width: 0;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        padding: 10px 0;
        border-bottom: 1px solid #eef2f7;
    }

    .table-stack tr:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .table-stack td {
        padding: 3px 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        line-height: 1.4;
        color: #98a6ad;
    }

    /* A stacked sheet is a form: the fields take the full width of the card and
       the row that holds them gets room to breathe. */
    .table-stack.table-editable tr {
        padding: 12px 0;
    }

    .table-stack.table-editable .form-control,
    .table-stack.table-editable .custom-select {
        min-width: 0;
        width: 100%;
    }
}