/* =============================================
   BGS Portal – site.css
   Bootstrap 5.3 + Custom Admin Theme
   Phase 1  |  dbBgSurat
   ============================================= */

/* --- CSS Variables -------------------------------- */
:root {
    --pri:          #1b3f6e;
    --pri-dk:       #122c4e;
    --pri-lt:       #e8eef7;
    --acc:          #1565c0;
    --acc-hv:       #0d47a1;
    --sidebar-w:    230px;
    --header-h:     56px;
    --body-bg:      #f0f2f7;
    --card-bg:      #ffffff;
    --border:       #dee2e6;
    --txt:          #212529;
    --txt-muted:    #6c757d;
    --radius:       7px;
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.09);
    --shadow-md:    0 3px 12px rgba(0,0,0,0.11);
    --paid-ok-bg:   #d1fae5;
    --paid-ok-txt:  #065f46;
    --paid-due-bg:  #fee2e2;
    --paid-due-txt: #991b1b;
}

/* --- Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin:      0;
    background:  var(--body-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size:   14px;
    color:       var(--txt);
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-hv); text-decoration: underline; }

/* =============================================
   LOGIN PAGE
   ============================================= */
.login-page {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(145deg, var(--pri-dk) 0%, var(--acc) 100%);
    padding:         16px;
}

.login-card {
    background:    var(--card-bg);
    border-radius: 12px;
    box-shadow:    0 12px 40px rgba(0,0,0,0.22);
    padding:       44px 40px 36px;
    width:         100%;
    max-width:     400px;
}

.login-logo {
    text-align:    center;
    margin-bottom: 32px;
}

.login-logo .logo-ring {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--pri), var(--acc));
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    box-shadow:      0 4px 14px rgba(21,101,192,0.35);
}

.login-logo .logo-ring i { font-size: 30px; color: #fff; }

.login-logo h2 {
    font-size:      20px;
    font-weight:    700;
    color:          var(--pri);
    margin:         0 0 4px;
    letter-spacing: -0.3px;
}

.login-logo p {
    font-size: 13px;
    color:     var(--txt-muted);
    margin:    0;
}

/* =============================================
   FIXED HEADER
   ============================================= */
.app-header {
    position:    fixed;
    top: 0; left: 0; right: 0;
    height:      var(--header-h);
    background:  linear-gradient(90deg, var(--pri-dk), var(--pri));
    z-index:     1040;
    display:     flex;
    align-items: center;
    padding:     0 20px;
    gap:         12px;
    box-shadow:  0 2px 8px rgba(0,0,0,0.22);
}

.sidebar-toggler {
    display:    none;
    background: none;
    border:     none;
    color:      rgba(255,255,255,0.85);
    font-size:  23px;
    cursor:     pointer;
    padding:    0 3px;
    line-height: 1;
    flex-shrink: 0;
}

.app-header .brand {
    font-size:       17px;
    font-weight:     700;
    color:           #fff;
    letter-spacing:  -0.2px;
    white-space:     nowrap;
    flex:            1;
    display:         flex;
    align-items:     center;
    gap:             9px;
    text-decoration: none;
}

.app-header .brand:hover { text-decoration: none; color: #fff; }
.app-header .brand i { font-size: 20px; opacity: 0.9; }

.hdr-right {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-shrink: 0;
}

.hdr-member {
    font-size:   13px;
    color:       rgba(255,255,255,0.80);
    white-space: nowrap;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.hdr-member strong { color: #fff; font-weight: 600; }

.btn-logout {
    font-size:       13px;
    color:           rgba(255,255,255,0.82);
    border:          1px solid rgba(255,255,255,0.28);
    background:      rgba(255,255,255,0.08);
    padding:         5px 13px;
    border-radius:   5px;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    transition:      background 0.18s, color 0.18s;
    white-space:     nowrap;
    text-decoration: none;
}

.btn-logout:hover {
    background:      rgba(255,255,255,0.18);
    color:           #fff;
    text-decoration: none;
}

/* =============================================
   PAGE WRAPPER
   ============================================= */
.app-wrapper {
    display:     flex;
    min-height:  100vh;
    padding-top: var(--header-h);
}

/* =============================================
   SIDEBAR  (right side)
   ============================================= */
.app-sidebar {
    width:        var(--sidebar-w);
    min-width:    var(--sidebar-w);
    background:   var(--card-bg);
    border-left:  1px solid var(--border);
    min-height:   calc(100vh - var(--header-h));
    padding:      20px 0 30px;
    order:        2;
    flex-shrink:  0;
}

.sidebar-heading {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color:          var(--txt-muted);
    padding:        0 20px 8px;
    margin:         0 0 2px;
}

.sidebar-nav {
    list-style: none;
    margin:     0;
    padding:    0;
}

.sidebar-nav li a {
    display:         flex;
    align-items:     center;
    gap:             9px;
    padding:         10px 20px;
    font-size:       13.5px;
    color:           var(--txt);
    border-left:     3px solid transparent;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
}

.sidebar-nav li a i {
    font-size:   16px;
    width:       18px;
    text-align:  center;
    color:       var(--txt-muted);
    transition:  color 0.15s;
    flex-shrink: 0;
}

.sidebar-nav li a:hover {
    background:        #f1f5fb;
    color:             var(--acc);
    border-left-color: var(--acc);
    text-decoration:   none;
}

.sidebar-nav li a:hover i { color: var(--acc); }

.sidebar-nav li a.active {
    background:        var(--pri-lt);
    color:             var(--pri);
    border-left-color: var(--pri);
    font-weight:       600;
}

.sidebar-nav li a.active i { color: var(--pri); }

.sidebar-divider {
    border:     none;
    border-top: 1px solid var(--border);
    margin:     12px 0;
}

/* =============================================
   MAIN CONTENT  (left side)
   ============================================= */
.app-main {
    flex:      1;
    min-width: 0;
    padding:   28px 28px 48px;
    order:     1;
}

/* =============================================
   PAGE TITLE
   ============================================= */
.page-title {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  24px;
    padding-bottom: 14px;
    border-bottom:  2px solid var(--border);
}

.page-title i  { font-size: 22px; color: var(--acc); }

.page-title h4 {
    font-size:   19px;
    font-weight: 700;
    color:       var(--pri);
    margin:      0;
}

/* =============================================
   CARD PANEL
   ============================================= */
.card-panel {
    background:    var(--card-bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-sm);
    margin-bottom: 22px;
    overflow:      hidden;
}

.card-panel-head {
    padding:       13px 20px;
    background:    var(--pri-lt);
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           9px;
}

.card-panel-head h5 {
    font-size:   14px;
    font-weight: 700;
    color:       var(--pri);
    margin:      0;
}

.card-panel-head i { font-size: 16px; color: var(--acc); }

.card-panel-body { padding: 20px 22px; }

/* =============================================
   MEMBER DETAIL TABLE
   ============================================= */
.detail-tbl {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
}

.detail-tbl tr:not(:last-child) td { border-bottom: 1px solid #f3f4f6; }
.detail-tbl tr:hover td            { background: #fafbff; }

.detail-tbl td {
    padding:        10px 6px;
    vertical-align: middle;
    font-size:      13.5px;
}

.detail-tbl td.lbl {
    width:          38%;
    font-size:      12px;
    font-weight:    700;
    color:          var(--txt-muted);
    text-transform: uppercase;
    letter-spacing: 0.35px;
    padding-right:  16px;
    white-space:    nowrap;
}

.detail-tbl td.val { color: var(--txt); }

.val-empty { color: #adb5bd; font-style: italic; }

/* PaidTill colour badges */
.badge-paid {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 12px;
    border-radius: 20px;
    font-size:     12.5px;
    font-weight:   600;
}

.badge-paid-ok  { background: var(--paid-ok-bg);  color: var(--paid-ok-txt);  }
.badge-paid-due { background: var(--paid-due-bg);  color: var(--paid-due-txt); }

/* =============================================
   FORMS
   ============================================= */
.form-lbl {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         #374151;
    margin-bottom: 5px;
}

.form-ctrl {
    display:       block;
    width:         100%;
    padding:       9px 12px;
    font-size:     13.5px;
    color:         var(--txt);
    background:    #fff;
    border:        1px solid #ced4da;
    border-radius: 5px;
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
}

.form-ctrl:focus {
    border-color: var(--acc);
    box-shadow:   0 0 0 3px rgba(21,101,192,0.14);
}

.form-group { margin-bottom: 18px; }

/* =============================================
   BUTTONS
   ============================================= */
.btn-site-primary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    background:      var(--acc);
    color:           #fff;
    border:          1px solid var(--acc);
    padding:         9px 24px;
    font-size:       14px;
    font-weight:     600;
    border-radius:   5px;
    cursor:          pointer;
    transition:      background 0.18s, border-color 0.18s, box-shadow 0.18s;
    text-decoration: none;
}

.btn-site-primary:hover {
    background:      var(--acc-hv);
    border-color:    var(--acc-hv);
    color:           #fff;
    text-decoration: none;
    box-shadow:      0 3px 8px rgba(13,71,161,0.25);
}

.btn-full { width: 100%; }

/* =============================================
   MESSAGE / ALERT BOXES
   ============================================= */
.msg-box {
    display:       flex;
    align-items:   flex-start;
    gap:           9px;
    padding:       11px 14px;
    border-radius: 6px;
    font-size:     13.5px;
    margin-bottom: 18px;
}

.msg-box i { flex-shrink: 0; font-size: 16px; margin-top: 1px; }

.msg-error   { background: #fff5f5; border: 1px solid #fca5a5; color: #b91c1c; }
.msg-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }

/* =============================================
   MOBILE OVERLAY
   ============================================= */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.40);
    z-index:    1029;
}

.sidebar-overlay.show { display: block; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 991.98px) {

    :root { --sidebar-w: 220px; }

    .sidebar-toggler { display: flex; }

    .app-sidebar {
        position:   fixed;
        top:        var(--header-h);
        right:      0;
        bottom:     0;
        z-index:    1030;
        transform:  translateX(100%);
        transition: transform 0.28s ease;
        box-shadow: -4px 0 18px rgba(0,0,0,0.13);
        overflow-y: auto;
        min-height: 0;
    }

    .app-sidebar.open { transform: translateX(0); }

    .app-main { padding: 20px 18px 40px; }
}

@media (max-width: 575.98px) {
    .login-card  { padding: 30px 20px 26px; }
    .hdr-member  { display: none; }
    .app-main    { padding: 16px 12px 36px; }
    .page-title h4 { font-size: 16px; }
    .detail-tbl td.lbl { width: 42%; }
    .card-panel-body   { padding: 14px 14px; }
}

/* =============================================
   MEMBER PHOTO  (Default.aspx)
   Photo sits in a rowspan="3" table cell beside
   Serial No, ITS and Full Name rows.
   ============================================= */

/* The photo cell: right-aligned, no border on rowspan rows */
.detail-tbl td.photo-cell {
    width:          120px;
    min-width:      120px;
    padding:        8px 0 8px 16px;
    vertical-align: top;
    text-align:     center;
    border-bottom:  none !important;  /* rowspan cell - no row dividers */
}

/* The photo itself: fixed 98x118 as requested */
.member-photo {
    display:       block;
    width:         98px;
    height:        118px;
    object-fit:    cover;
    object-position: center top;
    border-radius: 6px;
    border:        2px solid var(--border);
    box-shadow:    var(--shadow-sm);
    background:    #e8eef7;
}

/* On small screens hide the photo cell and let table go full width */
@media (max-width: 480px) {
    .detail-tbl td.photo-cell {
        display: none;
    }
    .detail-tbl td.val[colspan] {
        colspan: 1;
    }
}

/* =============================================
   ADMIN - EDIT MEMBER PAGE
   ============================================= */

/* ITS Search row */
.search-row {
    display:     flex;
    gap:         14px;
    align-items: flex-end;
}

.search-input-wrap {
    flex: 0 0 220px;
}

.search-btn-wrap {
    flex-shrink: 0;
    padding-bottom: 1px;
}

/* Member identity strip (shown after search) */
.member-strip {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    var(--pri-lt);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       14px 18px;
    margin-bottom: 18px;
}

.strip-photo {
    width:         52px;
    height:        62px;
    object-fit:    cover;
    object-position: center top;
    border-radius: 5px;
    border:        2px solid var(--border);
    flex-shrink:   0;
    background:    #e8eef7;
}

.member-strip-info { flex: 1; min-width: 0; }

.strip-name {
    font-size:   16px;
    font-weight: 700;
    color:       var(--pri);
    margin-bottom: 4px;
}

.strip-meta {
    font-size: 13px;
    color:     var(--txt-muted);
}

/* Section head is clickable */
.section-head { cursor: pointer; user-select: none; }
.section-head:hover { background: #dde6f5; }
.section-toggle-icon { font-size: 15px; color: var(--txt-muted); }

/* Two-column form grid inside sections */
.form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 20px;
}

.form-group-full {
    grid-column: 1 / -1;
}

/* Fees section layout */
.fees-row {
    display:     flex;
    align-items: flex-end;
    gap:         20px;
    flex-wrap:   wrap;
    margin-bottom: 4px;
}

.fees-year-input { max-width: 120px; }

.fees-threshold-note {
    font-size:   13px;
    color:       var(--txt-muted);
    padding-bottom: 10px;
}

.form-hint {
    font-size:  12px;
    font-style: italic;
    color:      #adb5bd;
}

/* Status section */
.status-row {
    display:     flex;
    align-items: center;
    gap:         24px;
    flex-wrap:   wrap;
}

.status-current {
    font-size:  14px;
    color:      var(--txt);
    display:    flex;
    align-items: center;
    gap:        8px;
}

.status-buttons {
    display: flex;
    gap:     10px;
}

/* Status badges */
.status-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       4px 12px;
    border-radius: 20px;
    font-size:     12.5px;
    font-weight:   700;
}

.status-active   { background: #d1fae5; color: #065f46; }
.status-disabled { background: #fee2e2; color: #991b1b; }

/* Extra button variants */
.btn-site-success {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #16a34a;
    color:           #fff;
    border:          1px solid #16a34a;
    padding:         8px 20px;
    font-size:       13.5px;
    font-weight:     600;
    border-radius:   5px;
    cursor:          pointer;
    transition:      background 0.18s;
}

.btn-site-success:hover { background: #15803d; border-color: #15803d; }

.btn-site-danger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #dc2626;
    color:           #fff;
    border:          1px solid #dc2626;
    padding:         8px 20px;
    font-size:       13.5px;
    font-weight:     600;
    border-radius:   5px;
    cursor:          pointer;
    transition:      background 0.18s;
}

.btn-site-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-disabled {
    opacity: 0.5;
    cursor:  not-allowed;
    pointer-events: none;
}

/* Audit log table */
.audit-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       12.5px;
}

.audit-table th {
    background:     var(--pri);
    color:          #fff;
    padding:        8px 12px;
    text-align:     left;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight:    600;
    white-space:    nowrap;
}

.audit-table td {
    padding:       7px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    color:         var(--txt);
}

.audit-table tr:hover td { background: #f8faff; }

/* Responsive adjustments for edit page */
@media (max-width: 640px) {
    .search-row        { flex-direction: column; align-items: stretch; }
    .search-btn-wrap   { padding-bottom: 0; }
    .form-grid         { grid-template-columns: 1fr; }
    .form-group-full   { grid-column: 1; }
    .status-row        { flex-direction: column; align-items: flex-start; }
    .fees-year-input   { max-width: 100%; }
}

/* =============================================
   ADMIN - ADDITIONAL STYLES (EditMember updates)
   ============================================= */

/* Warning button - for Reset Password */
.btn-site-warning {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #d97706;
    color:           #fff;
    border:          1px solid #d97706;
    padding:         8px 20px;
    font-size:       13.5px;
    font-weight:     600;
    border-radius:   5px;
    cursor:          pointer;
    transition:      background 0.18s;
}

.btn-site-warning:hover {
    background:   #b45309;
    border-color: #b45309;
}

/* Reset password info text */
.reset-info {
    font-size:     13.5px;
    color:         var(--txt-muted);
    margin-bottom: 16px;
    padding:       10px 14px;
    background:    #fffbeb;
    border:        1px solid #fde68a;
    border-radius: 5px;
}

/* =============================================
   ACCESS RIGHTS PAGE
   ============================================= */

/* Edit mode strip */
.ar-edit-strip {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--pri-lt);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       11px 16px;
    font-size:     14px;
    margin-bottom: 18px;
    flex-wrap:     wrap;
}

.ar-edit-strip i    { font-size: 20px; color: var(--acc); }
.ar-cancel-link     { margin-left: auto; font-size: 13px; color: var(--acc); }
.ar-cancel-link:hover { color: var(--acc-hv); }
.txt-muted          { color: var(--txt-muted); font-size: 13px; }

/* Access type radio row */
.ar-access-type     { margin-bottom: 16px; }

.ar-radio-row {
    display:  flex;
    gap:      24px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ar-radio-lbl {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   13.5px;
    cursor:      pointer;
}

/* Group checkbox panel */
.ar-group-panel {
    margin-bottom: 18px;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.ar-group-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 14px;
    background:      var(--pri-lt);
    border-bottom:   1px solid var(--border);
}

.ar-group-toolbar .form-lbl { margin: 0; }

.ar-select-links {
    font-size: 12.5px;
    color:     var(--txt-muted);
}

.ar-select-links a {
    color:           var(--acc);
    text-decoration: none;
}

.ar-select-links a:hover { text-decoration: underline; }

.ar-group-checks {
    padding:    10px 14px;
    max-height: 200px;
    overflow-y: auto;
}

.ar-chk-list span {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       5px 0;
    font-size:     13.5px;
}

/* Form action buttons row */
.ar-form-actions {
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
    margin-top: 4px;
}

/* Secondary button */
.btn-site-secondary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    background:      #fff;
    color:           var(--txt);
    border:          1px solid #ced4da;
    padding:         8px 20px;
    font-size:       13.5px;
    font-weight:     600;
    border-radius:   5px;
    cursor:          pointer;
    transition:      background 0.18s, border-color 0.18s;
}

.btn-site-secondary:hover {
    background:   #f1f5fb;
    border-color: var(--acc);
    color:        var(--acc);
}

/* Access rights grid */
.ar-grid { width: 100%; }

.ar-action-link {
    font-size:       12.5px;
    font-weight:     600;
    text-decoration: none;
    padding:         3px 8px;
    border-radius:   4px;
}

.ar-edit   { color: var(--acc);    background: #e8f0ff; }
.ar-delete { color: #dc2626;       background: #fee2e2; }

.ar-edit:hover   { background: #d0e3ff; text-decoration: none; }
.ar-delete:hover { background: #fecaca; text-decoration: none; }

@media (max-width: 640px) {
    .ar-radio-row       { flex-direction: column; gap: 10px; }
    .ar-group-toolbar   { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ar-form-actions    { flex-direction: column; }
    .ar-form-actions .btn-site-primary,
    .ar-form-actions .btn-site-secondary { width: 100%; }
}

/* =============================================
   ACCESS RIGHTS - Member info strip (assign form)
   ============================================= */
.ar-member-info {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    margin-bottom: 16px;
    max-width:     520px;
}

.ar-member-info-row {
    display:     flex;
    width:       100%;
    border-bottom: 1px solid #f0f2f7;
}

.ar-member-info-row:last-child {
    border-bottom: none;
}

.ar-info-lbl {
    width:          120px;
    min-width:      120px;
    padding:        8px 12px;
    font-size:      11.5px;
    font-weight:    700;
    color:          var(--txt-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background:     var(--pri-lt);
    display:        flex;
    align-items:    center;
}

.ar-info-val {
    flex:       1;
    padding:    8px 12px;
    font-size:  13.5px;
    color:      var(--txt);
    background: #fff;
    display:    flex;
    align-items: center;
}

/* =============================================
   ACCESS RIGHTS - Grid action buttons fix (Point 3)
   Serial no column + AssignedBy ITS (Point 4)
   ============================================= */

/* Keep Edit and Remove buttons on one line, never wrap */
.ar-actions-wrap {
    display:     flex;
    gap:         6px;
    align-items: center;
    flex-wrap:   nowrap;
    white-space: nowrap;
}

.ar-action-link {
    white-space:     nowrap;   /* belt-and-braces: icon+text never split */
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
}

/* ITS shown below name in Assigned By column */
.grid-its-sub {
    font-size:  11.5px;
    color:      var(--txt-muted);
    font-weight: 400;
}