/* Ny boaty lehibe fitoerana tabilao mba hisian'ny scroll raha be ny data */
.console-container {
    width: 100%;
    max-height: 500px; /* Azonao ovana arakaraka ny tiana */
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #333;
    background-color: #1e1e1e;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Ny tabilao class "tab-console" */
.tab-console {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #d4d4d4;
    background-color: #1e1e1e;
    text-align: left;
}

/* --- FIXATION THEADER (Tete Tableau) --- */
.tab-console thead th {
    position: sticky;
    top: 0;
    background-color: #2d2d2d;
    color: #4fc1ff;
    font-weight: bold;
    padding: 12px 10px;
    border-bottom: 2px solid #3e3e3e;
    z-index: 2; /* Mba hijanona eny amboniny foana */
}

/* Ny sela tsotra rehetra */
.tab-console tbody td {
    padding: 10px;
    border-bottom: 1px solid #2d2d2d;
    white-space: nowrap; /* Tsy avela hanao ligne vaovao ny soratra */
}

/* --- FIXATION & TRAITEMENT PREMIERE COLONNE --- */
.tab-console tbody tr td:first-child {
    max-width: 150px;       /* Limitation ny halavan'ny tsanganana voalohany */
    overflow: hidden;
    text-overflow: ellipsis; /* Manisy "..." raha lava loatra ilay soratra */
    white-space: nowrap;
    color: #ce9178;          /* Loko miavaka kely (Console style) */
    font-weight: bold;
}

/* Rehefa lalovan'ny souris (Hover effect) */
.tab-console tbody tr:hover {
    background-color: #2a2a2a;
}

/* Scrollbar Style ho an'ny Chrome/Safari/Edge mba hifanaraka amin'ny Console */
.console-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.console-container::-webkit-scrollbar-track {
    background: #1e1e1e;
}
.console-container::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 4px;
}
.console-container::-webkit-scrollbar-thumb:hover {
    background: #4fc1ff;
}

/* =========================================================================
   1. TABLEAU DE NOTES (Ho an'ny Solosaina / Desktop)
   ========================================================================= */

/* Trano misy Scroll (Overflow) */
.table-wrapper { 
    background-color: white; 
    height: 550px;                 /* Haavo voafetra miteraka scroll */
    max-height: 550px;
    border: 1px solid #eef2f5;
    border-radius: 8px;
    overflow-y: auto;              /* Scroll midina ihany raha feno */
    overflow-x: hidden;            /* Tampenana ny scroll mitsivalana amin'ny PC */
    position: relative;            /* Ilaina amin'ny fahamarinan'ny sticky header */
}

/* Fanatsarana ny Scrollbar (mba ho manify) */
.table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;                   /* Ho an'ny scrollbar mitsivalana raha misy */
}
.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Styling ny Tableau */
.table-notes {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* Lohateny tsy mihetsika (Sticky Header) */
.table-notes th {
    position: -webkit-sticky;      /* Mba handeha amin'ny Safari */
    position: sticky;
    top: 0;
    background-color: #1e293b !important; /* Loko manga antitra */
    color: #ffffff;
    font-weight: 600;
    padding: 14px 14px;
    font-size: 0.95rem;
    z-index: 2;                   /* Avo rano mba ho ambonin'ny tr rehetra foana */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: inset 0 -2px 0 #1e293b;
}

/* Ny tsipika tsirairay (Rows) */
.table-notes tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.table-notes tbody td {
    padding: 12px 16px;
    color: #475569;
    font-size: 0.95rem;
}

/* Rehefa mandalo fotsiny ny totozy (Hover) */
.table-notes tbody tr:hover {
    background-color: #fffde7;     /* Mavo matifitifitra */
}

/* REHEFA MISY INPUT ETO AM-PIASANA (Focus) */
.table-notes tbody tr:focus-within {
    background-color: #fff9c4 !important; /* Mavo mazava tsara */
    transform: scale(1.002);       /* Mivoaka kely handalo ny hafa */
    box-shadow: inset 4px 0 0 #fbc02d, 0 2px 5px rgba(0,0,0,0.05);
}

/* Ny Input Fampidirana Naoty */
.input-note {
    width: 80px;
    padding: 8px 12px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.2s ease-in-out;
    background-color: #f8fafc;
}

/* Rehefa manindry ao anatin'ny Input */
.input-note:focus {
    border-color: #fbc02d;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(251, 192, 45, 0.3);
    outline: none;
    transform: scale(1.08);        /* Mihalehibe mba hisongadina */
}

/* Mba tsy hikitikitika ny layout ny float */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


/* =========================================================================
   2. SIMPLE TABLE (Rakitra teo aloha ho an'ny .styled-table)
   ========================================================================= */

.table-container {
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-overflow-scrolling: touch;
}

.styled-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    font-size: 0.95em;
    min-width: 700px;
}

.styled-table th:first-child, 
.styled-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 3px 0 5px rgba(0,0,0,0.1);
}

.styled-table thead th:first-child {
    background-color: #008080 !important; 
    color: #ffffff;
}

.styled-table tbody tr td:first-child {
    background-color: #ffffff; 
}

.styled-table tbody tr:nth-of-type(even) td:first-child {
    background-color: #f9f9f9; 
}

.styled-table tbody tr:hover td:first-child {
    background-color: #e0f2f1; 
}


/* =========================================================================
   3. FANITSIANA MANOKANA HO AN'NY TELEFAONA (Ecran < 768px)
   ========================================================================= */
@media screen and (max-width: 768px) {
    
    /* Avadika ho azo mi-scroll mitsivalana ny wrapper */
    .table-wrapper {
        overflow-x: auto !important; 
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        height: auto;               /* Tsy voatery ho 450px raikitra amin'ny finday */
        max-height: 400px;          /* Lohateny sy naoty vitsivitsy no hita indray miandrana */
        padding: 0;
        margin: 10px 0;
    }

    /* Ovaina ho separate nefa elanelana 0 mba handeha ny STICKY COLUMN sady tsy hisy "tete" */
    .table-notes {
        border-collapse: separate !important;
        border-spacing: 0 !important; 
        min-width: 550px !important; /* Manery ny tabilao hivelatra fa tsy hifanitsaka */
    }

    /* Sisin'ny tabilao manontolo sy ny cellule rehetra mba ho madio */
    .table-notes th,
    .table-notes td {
        border-bottom: 1px solid #eef2f5 !important;
        border-right: 1px solid #eef2f5 !important;
    }

    /* Esorina ny border farany ankavanana */
    .table-notes th:last-child,
    .table-notes td:last-child {
        border-right: none !important;
    }

    /* Ampitandrihana kely ny padding sy ny endri-tsoratra amin'ny finday */
    .table-notes th {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }

    .table-notes tbody td {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }

    /* === STICKY COLUMN: NY TSANGANANA VOALOHANY HO RAIKITRA === */

    /* === STICKY COLUMN: NY TSANGANANA VOALOHANY HO RAIKITRA === */
    .table-notes th:first-child, 
    .table-notes tbody tr td:first-child {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        border-right: none !important; 
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08) !important; 
    }

    /* 1. Ny andalana misy anarana (td) dia omena z-index: 3 */
    .table-notes tbody tr td:first-child {
        background-color: #ffffff !important;
        z-index: 3 !important; 
    }

    /* 2. Ny lohateny voalohany (th) kosa omena z-index: 4 (Avo kokoa mba hanarona ny td rehefa miakatra) */
    .table-notes thead th:first-child {
        background-color: #1e293b !important;
        z-index: 4 !important; 
    }

    /* Mitazona ny loko mavo mavitrika rehefa mandalo na mi-focus amin'ny input ny rantsan-tanana */
    .table-notes tbody tr:hover td:first-child {
        background-color: #fffde7 !important;
    }
    .table-notes tbody tr:focus-within td:first-child {
        background-color: #fff9c4 !important;
    }

    /* Ny Input fampidirana naoty amin'ny finday */
    .input-note {
        width: 60px !important;       /* Kely kokoa mba ho zakan'ny tsanganana */
        padding: 6px 8px !important;
        font-size: 0.9rem !important;
    }
    .input-note:focus {
        transform: scale(1.03) !important; /* Tsy atao lehibe loatra eo amin'ny finday */
    }

}


/* PANNAEU ADMIN */

/* --- CONSOLE CONTROL PANEL (Bokotra ambony) --- */
.console-control-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #1a1a1a;
    padding: 10px;
    border: 1px solid #333;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-family: 'Courier New', Courier, monospace;
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .console-control-panel {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.console-tabs-form {
    flex-grow: 1;
}

.tabs-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 4px;
    width: 100%;
}

.tab-btn {
    background: #252526;
    color: #cccccc;
    border: 1px solid #3c3c3c;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s, color 0.2s;
}

.tab-btn:hover {
    background-color: #333337;
    color: #fff;
    border-color: #4fc1ff;
    max-width: none !important;
    white-space: normal;
    z-index: 10;
    overflow: visible;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.tab-btn.active {
    background-color: #0e639c;
    color: #ffffff;
    border-color: #1177bb;
    font-weight: bold;
    box-shadow: inset 0 -2px 0 #4fc1ff;
}

/* --- BARRE DE RECHERCHE --- */
.console-search-form {
    min-width: 220px;
}
.search-box {
    display: flex;
    border: 1px solid #3c3c3c;
    border-radius: 2px;
    overflow: hidden;
    background-color: #252526;
}
.search-input {
    background: none;
    border: none;
    padding: 5px 10px;
    color: #d4d4d4;
    font-family: inherit;
    font-size: 12px;
    width: 100%;
    outline: none;
}
.search-btn {
    background-color: #333333;
    border: none;
    color: #4fc1ff;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
}
.search-btn:hover {
    background-color: #0e639c;
    color: #fff;
}

/* --- TABILAO MANANA HAAVO RAIKITRA (HAUTEUR FIXE) --- */
.console-container {
    width: 100%;
    height: 400px;        /* Eto no mametraka ny haavo raikitra */
    overflow-y: auto;     /* Scroll mitsangana raha maro ny andalana */
    overflow-x: auto;     /* Scroll mitsivalana raha tery ny ecran */
    border: 1px solid #333;
    background-color: #1e1e1e;
    border-radius: 0 0 4px 4px;
}

/* Scrollbar kanto ho an'ny rafitra pro (Chrome, Safari, Edge) */
.console-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.console-container::-webkit-scrollbar-track {
    background: #1e1e1e;
}
.console-container::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 4px;
}
.console-container::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f;
}

.tab-console {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace;
    color: #d4d4d4;
    background-color: #1e1e1e;
    text-align: left;
}

/* Raikitra eo ambony foana ny lohateny na mi-scroll aza */
.tab-console thead th {
    position: sticky;
    top: 0;
    background-color: #2d2d2d;
    color: #4fc1ff;
    font-weight: bold;
    padding: 10px;
    border-bottom: 2px solid #3e3e3e;
    z-index: 2;
    white-space: nowrap;
}

.tab-console tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #2d2d2d;
    white-space: nowrap;
}

.tab-console tbody tr td:first-child {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ce9178;
    font-weight: bold;
}

.tab-console td.nomtab {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Miitatra ny cell rehefa andalovan'ny souris */
.tab-console td.nomtab:hover {
    max-width: none;
    white-space: normal;
    overflow: visible;
    background-color: #252526;
    color: #fff;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.tab-console tbody tr:hover {
    background-color: #2a2a2a;
}

/* --- LABELES / BOKOTRA ANY AMBANY --- */
.bottom-services-panel {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .bottom-services-panel {
        grid-template-columns: 1fr 1fr;
    }
}

.field-console {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    color: #d4d4d4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

.field-console legend {
    color: #4fc1ff;
    padding: 0 8px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

.btn-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-console-link {
    display: block;
    width: 100%;
    background-color: #252526;
    color: #cccccc;
    border: 1px solid #3c3c3c;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.btn-console-link:hover {
    background-color: #0e639c;
    color: #fff;
    border-color: #1177bb;
}

.link-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.link-periode {
    color: #4fc1ff;
    text-decoration: none;
    background: #252526;
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid #3c3c3c;
    transition: all 0.2s;
}

.link-periode:hover {
    background: #333337;
    color: #fff;
    border-color: #4fc1ff;
}