/*
|--------------------------------------------------------------------------
| dashboard.css
|--------------------------------------------------------------------------
| Styles for the approval review modal and pending-forms alert panels.
| Add to css/ folder and include in inc/header.php after bootstrap:
|   <link href="css/dashboard.css" rel="stylesheet">
|--------------------------------------------------------------------------
*/


/* =========================================================
   REVIEW MODAL — header
   ========================================================= */

#review-modal .modal-header {
    background-color : #2c3e50;
    color            : #ffffff;
    border-radius    : 4px 4px 0 0;
    padding          : 14px 20px;
}
#review-modal .modal-title {
    font-size      : 16px;
    font-weight    : 600;
    letter-spacing : .3px;
}
#review-modal .close {
    color      : #ffffff;
    opacity    : .85;
    font-size  : 22px;
    margin-top : -2px;
    text-shadow: none;
}
#review-modal .close:hover { opacity: 1; }


/* =========================================================
   REVIEW MODAL — detail table
   .detail-label / .detail-value classes set by home_ajax.php
   !important used only where Bootstrap .table th/td override
   ========================================================= */

#review-modal .modal-body {
    padding          : 16px 20px 8px;
    background-color : #f8f9fa;
}

#review-modal table.detail-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 14px;
    margin-bottom  : 0;
}

/* Label column */
#review-modal table.detail-table th.detail-label {
    width            : 36%                !important;
    padding          : 9px 14px          !important;
    background-color : #2c3e50           !important;
    color            : #ecf0f1           !important;
    font-weight      : 600               !important;
    font-size        : 13px              !important;
    border           : 1px solid #253545 !important;
    vertical-align   : middle            !important;
    text-align       : right             !important;
}

/* Value column */
#review-modal table.detail-table td.detail-value {
    padding          : 9px 14px          !important;
    background-color : #ffffff           !important;
    color            : #2c3e50           !important;
    font-size        : 14px              !important;
    border           : 1px solid #dee2e6 !important;
    vertical-align   : middle            !important;
    line-height      : 1.5               !important;
}

/* Zebra stripe on value cells */
#review-modal table.detail-table tr:nth-child(even) td.detail-value {
    background-color : #f1f3f5 !important;
}


/* =========================================================
   REVIEW MODAL — footer
   ========================================================= */

#review-modal .modal-footer {
    background-color : #f1f3f5;
    border-top       : 1px solid #dee2e6;
    padding          : 12px 20px;
}

/* Feedback message line */
#review-modal-msg {
    font-size    : 14px;
    margin-bottom: 6px;
    min-height   : 20px;
    text-align   : left;
}

/* Rejection reason area */
#reject-reason-area {
    text-align   : left;
    margin-bottom: 10px;
    padding      : 10px 12px;
    background   : #fff8e1;
    border       : 1px solid #f0c040;
    border-radius: 4px;
    width        : 100%;
}
#reject-reason-area label {
    font-weight  : 600;
    color        : #7d4e00;
    margin-bottom: 4px;
    display      : block;
}
#reject-reason-input {
    border-color : #f0c040;
    resize       : vertical;
    width        : 100%;
}
#reject-reason-input:focus {
    border-color : #e6a800;
    box-shadow   : 0 0 4px rgba(230,168,0,.35);
    outline      : none;
}

/* Approve button */
#btn-modal-approve {
    background-color : #27ae60;
    border-color     : #1e8449;
    color            : #ffffff;
    font-weight      : 600;
    min-width        : 110px;
}
#btn-modal-approve:hover,
#btn-modal-approve:focus {
    background-color : #1e8449;
    border-color     : #196f3d;
    color            : #ffffff;
}
#btn-modal-approve[disabled] {
    background-color : #a9dfbf;
    border-color     : #a9dfbf;
    color            : #fff;
}

/* Reject button */
#btn-modal-reject {
    background-color : #e74c3c;
    border-color     : #c0392b;
    color            : #ffffff;
    font-weight      : 600;
    min-width        : 110px;
}
#btn-modal-reject:hover,
#btn-modal-reject:focus {
    background-color : #c0392b;
    border-color     : #96281b;
    color            : #ffffff;
}
#btn-modal-reject[disabled] {
    background-color : #f5b7b1;
    border-color     : #f5b7b1;
    color            : #fff;
}


/* =========================================================
   PENDING-FORMS ALERT PANELS
   ========================================================= */

.panel.panel-danger {
    border        : none;
    border-radius : 4px;
    box-shadow    : 0 1px 4px rgba(0,0,0,.14);
    overflow      : hidden;
    margin-bottom : 12px;
}

/* Heading */
.panel.panel-danger > .panel-heading {
    background-color : #2c3e50 !important;
    color            : #ffffff !important;
    border           : none;
    padding          : 10px 14px;
    font-size        : 14px;
    user-select      : none;
}
.panel.panel-danger > .panel-heading:hover {
    background-color : #34495e !important;
}
.panel.panel-danger > .panel-heading strong {
    font-size : 14px;
}

/* Chevron */
.panel.panel-danger > .panel-heading .glyphicon-chevron-down {
    transition : transform .2s ease;
    color      : #95a5a6;
}
.panel.panel-danger > .panel-heading[aria-expanded="true"] .glyphicon-chevron-down {
    transform : rotate(180deg);
}

/* Table inside the collapsed body */
.panel.panel-danger .collapse table thead tr {
    background-color : #34495e;
    color            : #ecf0f1;
}
.panel.panel-danger .collapse table thead th {
    font-weight : 600;
    font-size   : 12px;
    padding     : 6px 8px;
    border      : none;
    white-space : nowrap;
    color       : #ecf0f1;
}
.panel.panel-danger .collapse table tbody td {
    font-size      : 12px;
    padding        : 6px 8px;
    border-top     : 1px solid #eaecee;
    vertical-align : middle;
    color          : #2c3e50;
}
.panel.panel-danger .collapse table tbody tr:hover td {
    background-color : #eaf4fb;
}

/* Review button */
.btn-review-form {
    background-color : #e67e22;
    border-color     : #ca6f1e;
    color            : #ffffff;
    font-size        : 11px;
    font-weight      : 600;
    padding          : 3px 10px;
    white-space      : nowrap;
}
.btn-review-form:hover,
.btn-review-form:focus {
    background-color : #ca6f1e;
    border-color     : #a85e17;
    color            : #ffffff;
}


/* =========================================================
   CALENDAR EVENT MODAL
   ========================================================= */

#event-modal .modal-header {
    background-color : #2c3e50;
    color            : #ffffff;
    border-radius    : 4px 4px 0 0;
}
#event-modal .modal-title {
    font-size  : 15px;
    font-weight: 600;
}
#event-modal .close {
    color      : #ffffff;
    opacity    : .85;
    text-shadow: none;
}
#event-modal .close:hover { opacity: 1; }


/* =========================================================
   EMPLOYEE "MY FORMS" PANELS
   ========================================================= */

.my-forms-panel {
    border        : none;
    border-radius : 4px;
    box-shadow    : 0 1px 4px rgba(0,0,0,.12);
    overflow      : hidden;
    margin-bottom : 10px;
}

.my-forms-panel > .panel-heading {
    background-color : #1a5276 !important;
    color            : #ffffff !important;
    border           : none;
    padding          : 10px 14px;
    font-size        : 14px;
    user-select      : none;
}
.my-forms-panel > .panel-heading:hover {
    background-color : #1f618d !important;
}

/* Pending count badge in heading */
.my-forms-pending-badge {
    background-color : #e67e22;
    color            : #ffffff;
    font-size        : 11px;
    margin-left      : 6px;
    vertical-align   : middle;
}

/* Chevron */
.my-forms-panel > .panel-heading .glyphicon-chevron-down {
    transition : transform .2s ease;
    color      : #85c1e9;
}
.my-forms-panel > .panel-heading[aria-expanded="true"] .glyphicon-chevron-down {
    transform : rotate(180deg);
}

/* Table */
.my-forms-panel .collapse table thead th {
    background-color : #1f618d;
    color            : #ffffff;
    font-size        : 12px;
    font-weight      : 600;
    padding          : 6px 8px;
    border           : none;
}
.my-forms-panel .collapse table tbody td {
    font-size      : 13px;
    padding        : 7px 8px;
    border-top     : 1px solid #eaecee;
    vertical-align : middle;
    color          : #2c3e50;
}
.my-forms-panel .collapse table tbody tr:hover td {
    background-color : #eaf4fb;
}

/* Edit pencil link */
.my-forms-panel table a {
    color : #1a5276;
}
.my-forms-panel table a:hover {
    color : #e67e22;
}