/*
 * Pavitra Portal — shared-views.css
 * ===================================
 * Shared styles extracted from individual view pages.
 * Previously duplicated inline across 80+ .cshtml files;
 * now maintained in one place. All CSS variable compatible.
 *
 * Include: <link rel="stylesheet" href="~/css/shared-views.css" />
 * Already added to _Layout.cshtml via site.css @import.
 */

/* ── Table layout ───────────────────────────────────── */
table {
    border-collapse: collapse;
    background-color: var(--pv-surface, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

th, td {
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--pv-border, #ddd);
    font-size: 0.85rem;
    color: var(--pv-text, #333);
}

th {
    background-color: var(--pv-primary, #555778);
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

tr:hover { background-color: var(--pv-surface-raised, #f1f1f1); }
tr:nth-child(even) { background-color: var(--pv-surface-raised, #f9f9f9); }

/* ── Fixed-header scrollable table container ─────────── */
.table-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    border: 1px solid var(--pv-border, #ddd);
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--pv-border, #c1c1c1) transparent;
    background: var(--pv-surface, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.table-container::-webkit-scrollbar       { width: 6px; height: 6px; }
.table-container::-webkit-scrollbar-track { background: transparent; }
.table-container::-webkit-scrollbar-thumb {
    background: var(--pv-border, #c1c1c1);
    border-radius: 6px;
}

/* Sticky table head inside scrollable container */
.table-container thead th,
.table-container table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--pv-primary, #555778);
    color: #fff;
    box-shadow: 0 1px 0 var(--pv-border, #ddd);
}

/* ── Page section heading ────────────────────────────── */
h3.page-title, .view-title {
    color: var(--pv-text, #333);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pv-primary, #555778);
    font-size: 1.1rem;
}

/* ── Download / action buttons ───────────────────────── */
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--pv-primary, #070b26);
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.download-btn:hover  { background-color: var(--pv-primary-dark, #040816); color: #fff; transform: translateY(-1px); }
.download-btn:focus  { outline: none; }

.remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--pv-danger, #be254b);
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.remove-btn:hover  { background-color: #a01e3e; transform: translateY(-1px); }
.remove-btn:focus  { outline: none; }

/* ── File upload helpers ─────────────────────────────── */
input[type="file"] {
    margin: 6px 0;
    padding: 4px 6px;
    border: 1px solid var(--pv-border, #ccc);
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--pv-surface, #fff);
    color: var(--pv-text, #333);
}

/* ── Form helpers ────────────────────────────────────── */
.form-row-centered {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
  
/* ── Smaller input class (preserved from original) ───── */
.smaller-font, .smaller-font input {
    width: 200px;
}

.smaller-height { height: 36px; }

/* ── Status badges ───────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.status-badge.active   { background: #e8f5ee; color: #1a7f4b; }
.status-badge.inactive { background: #fee2e2; color: #b91c1c; }
.status-badge.pending  { background: #fef3c7; color: #b45309; }

/* ── Page alert banners (TempData messages) ──────────── */
.alert-success {
    background: #e8f5ee !important;
    color: #1a7f4b !important;
    border-left: 4px solid #1a7f4b !important;
}

.alert-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-left: 4px solid #b91c1c !important;
}

/* ── Map point / coordinate display ─────────────────── */
.coord-display {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--pv-text-muted, #718096);
    background: var(--pv-surface-raised, #f8f9fa);
    border: 1px solid var(--pv-border, #ddd);
    border-radius: 4px;
    padding: 3px 8px;
    display: inline-block;
}

/* ── Save / Ahwal buttons (map pages) ────────────────── */
.save-btn {
    display: none;
    background-color: var(--pv-primary, #635987);
    color: #fff;
    border: none;
    padding: 8px 16px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s, transform 0.15s;
}

.save-btn:hover { background-color: var(--pv-primary-dark, #524874); transform: scale(1.01); }

.ahwal-btn {
    display: none;
    background-color: var(--pv-primary, #635987);
    color: #fff;
    border: none;
    padding: 8px 16px;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ahwal-btn:hover { background-color: var(--pv-primary-dark, #514679); }

/* ── Print helpers ───────────────────────────────────── */
@media print {
    .download-btn, .remove-btn, .save-btn, .ahwal-btn,
    nav, header, .pv-sidebar, .pv-topbar { display: none !important; }
    .table-container { max-height: none !important; overflow: visible !important; }
    th { background-color: #555778 !important; color: #fff !important; }
}