/* =========================================================
   KNU MAIL — INTERNAL INTERFACE
   Desktop + Tablet + Mobile
   ========================================================= */


/* ---------------------------------------------------------
   Негизги корпоративдик түстөр
   --------------------------------------------------------- */

:root {
    --knu-blue: #155f94;
    --knu-blue-dark: #104b76;
    --knu-blue-light: #eaf4fa;
    --knu-gold: #d3aa35;
    --knu-border: #dfe8ee;
}


/* ---------------------------------------------------------
   LEFT MENU
   --------------------------------------------------------- */

#layout-menu {
    background:
        linear-gradient(
            180deg,
            #173e55 0%,
            #102f42 100%
        ) !important;
}


/* Сол менюдагы активдүү пункт */

#layout-menu .selected,
#layout-menu a:hover {
    background:
        rgba(255, 255, 255, 0.10) !important;
}


/* ---------------------------------------------------------
   KNU LOGO
   --------------------------------------------------------- */

#layout-menu #logo {
    width: 54px !important;
    height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    object-fit: contain !important;

    margin: 7px auto !important;

    background: #ffffff !important;

    border-radius: 50% !important;

    padding: 3px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.15) !important;
}


/* ---------------------------------------------------------
   LEFT MENU ICONS
   --------------------------------------------------------- */

#layout-menu a {
    transition:
        background 0.15s ease,
        color 0.15s ease !important;
}

#layout-menu a:hover {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   TOP HEADER
   --------------------------------------------------------- */

#layout-list .header,
#layout-content .header {
    background: #ffffff !important;

    border-bottom:
        1px solid var(--knu-border) !important;
}


/* ---------------------------------------------------------
   MAILBOX LIST
   --------------------------------------------------------- */

.folderlist li a {
    transition:
        background 0.15s ease,
        color 0.15s ease !important;
}


/* Active mailbox */

.folderlist li.selected > a,
.folderlist li a:hover {
    background: var(--knu-blue-light) !important;
    color: var(--knu-blue-dark) !important;
}


/* ---------------------------------------------------------
   MESSAGE LIST
   --------------------------------------------------------- */

.messagelist tr {
    transition:
        background 0.12s ease !important;
}

.messagelist tr:hover {
    background: #f5f9fc !important;
}


/* Selected message */

.messagelist tr.selected td {
    background: #e7f2f9 !important;
}


/* Unread */

.messagelist tr.unread {
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--knu-blue),
            #2382bd
        ) !important;

    border-color:
        var(--knu-blue) !important;

    border-radius: 7px !important;
}

.btn-primary:hover {
    background:
        var(--knu-blue-dark) !important;
}


/* ---------------------------------------------------------
   INPUTS / SEARCH
   --------------------------------------------------------- */

.form-control {
    border-color: #d6e1e8 !important;

    border-radius: 7px !important;
}

.form-control:focus {
    border-color:
        #3384b8 !important;

    box-shadow:
        0 0 0 3px
        rgba(36, 119, 172, 0.10) !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #b7c8d2;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    #layout-menu #logo {
        width: 48px !important;
        height: 48px !important;

        max-width: 48px !important;
        max-height: 48px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    /*
     Roundcube Elastic'тин mobile layout'ун
     өзгөртпөйбүз.
    */

    #layout-menu {
        background:
            linear-gradient(
                180deg,
                #173e55,
                #102f42
            ) !important;
    }


    /* Mobile logo */

    #layout-menu #logo {
        width: 42px !important;
        height: 42px !important;

        max-width: 42px !important;
        max-height: 42px !important;

        margin: 5px auto !important;

        padding: 2px !important;
    }


    /* Touch үчүн ыңгайлуу */

    .btn,
    button {
        min-height: 42px;
    }


    /* Формалар */

    .form-control {
        font-size: 16px !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 480px) {

    #layout-menu #logo {
        width: 38px !important;
        height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;
    }

}

/* =========================================================
   KNU MAIL — MOBILE SAFE OVERRIDES
   Roundcube Elastic responsive layout сакталат
   ========================================================= */

@media screen and (max-width: 768px) {

    /*
     Мобилдикте Roundcube'дун layout өлчөмдөрүнө тийбейбиз
    */

    #layout-menu {
        background: #163e55 !important;
    }

    /*
     Logo мобилдик менюга туура батсын
    */

    #layout-menu #logo {
        width: 40px !important;
        height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

        padding: 2px !important;
        margin: 5px auto !important;

        object-fit: contain !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        box-shadow: none !important;
    }

    /*
     Roundcube панелдеринин өз responsive
     позицияларын кайтарып беребиз
    */

    #layout-sidebar,
    #layout-list,
    #layout-content {
        max-width: none !important;
    }

    /*
     Формалар iPhone'до автоматтык zoom кылбасын
    */

    input,
    textarea,
    select,
    .form-control {
        font-size: 16px !important;
    }

}


/* Кичинекей телефондор */

@media screen and (max-width: 480px) {

    #layout-menu #logo {
        width: 36px !important;
        height: 36px !important;

        max-width: 36px !important;
        max-height: 36px !important;
    }

}

/* =========================================================
   KNU MAIL — MOBILE MENU FIX
   ========================================================= */

html.layout-phone #taskmenu,
html.layout-small #taskmenu {
    background: #164a63 !important;
}

html.layout-phone #taskmenu a,
html.layout-small #taskmenu a {
    color: #ffffff !important;
}

html.layout-phone #taskmenu a:before,
html.layout-small #taskmenu a:before {
    color: #ffffff !important;
}

html.layout-phone #taskmenu a:hover,
html.layout-phone #taskmenu a:focus,
html.layout-phone #taskmenu a.selected,
html.layout-small #taskmenu a:hover,
html.layout-small #taskmenu a:focus,
html.layout-small #taskmenu a.selected {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

html.layout-phone #taskmenu a.logout,
html.layout-small #taskmenu a.logout {
    color: #ffffff !important;
}

html.layout-phone #taskmenu a.logout:before,
html.layout-small #taskmenu a.logout:before {
    color: #ffffff !important;
}

html.layout-phone #layout-menu .popover-header,
html.layout-small #layout-menu .popover-header {
    background: #006b9c !important;
    color: #ffffff !important;
}


/* =========================================================
   KNU MAIL — MOBILE FOLDERS
   ========================================================= */

html.layout-phone #layout-sidebar > .header {
    background: #006b9c !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
}

html.layout-phone #layout-sidebar > .header .username {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.layout-phone #layout-sidebar > .header a.button,
html.layout-phone #layout-sidebar > .header a.button:before {
    color: #ffffff !important;
}

html.layout-phone #layout-sidebar .folderlist li > a {
    font-size: 16px !important;
}

html.layout-phone #layout-sidebar .folderlist li.selected > a {
    background: #e8f4fa !important;
    color: #005b85 !important;
    font-weight: 600 !important;
}

html.layout-phone #layout-sidebar .folderlist li.selected > a:before {
    color: #006b9c !important;
}

html.layout-phone #layout-sidebar > .footer {
    background: #f7f9fa !important;
    border-top: 1px solid #dce3e7 !important;
}