@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --color1: #5f7d54; /* Ana yeşil (adaçayı) — eski #dc3545 */
    --color2: #e5ecdf; /* Açık yeşil hover/accent */
    --color3: #263026; /* Koyu metin (yeşile çalan) */
    --color4: #7c8a7a; /* Muted */
    --color5: #e4eadd; /* Border */
    --bs-primary: #5f7d54;
    --bs-primary-rgb: 95,125,84;
    --bs-body-font-family: 'Roboto', sans-serif;

    --glass-bg: #ffffff;
    --glass-border: var(--color5);
    --glass-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

    /* yeni token'lar */
    --sage-deep: #435a3b;    /* koyu vurgu (buton hover, başlık) */
    --sage-dark: #3d5540;    /* koyu kart (dashboard highlight) */
    --gold: #cf9b3f;         /* ikincil vurgu (gelir/hakediş) */
    --good: #4f9d5b;
    --warn: #d7972f;
    --crit: #c15b4e;
    --bg-app: #e9ede4;       /* sayfa arka planı */
    --radius: 16px;          /* kart köşe yuvarlaklığı (eski 8px) */
    --shadow: 0 6px 24px rgba(52,71,48,.07);
}

body {
    background-color: var(--bg-app);
    color: var(--color3);
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6, .modal-title {
    font-family: 'Montserrat', sans-serif;
}

/* Logo Styles */
.login-logo {
    max-width: 100px;
    height: auto;
    display: inline-block;
}

.sidebar-logo {
    max-width: 120px;
    width: 100%;
    height: auto;
    display: inline-block;
    transition: transform 0.2s ease;
}

.sidebar-logo-link {
    text-decoration: none;
}

.sidebar-logo-link:hover .sidebar-logo {
    transform: scale(1.03);
}

/* Sidebar Wrapper */
#wrapper {
    display: flex;
    min-height: 100vh;
}

#sidebar {
    min-width: 280px;
    max-width: 280px;
    background: #ffffff; /* White sidebar */
    color: var(--color3);
    border-right: 1px solid var(--color5);
    z-index: 10;
    transition: all 0.3s;
}

#sidebar h2 {
    color: var(--color1); /* Red Title */
    font-weight: 700;
}

#sidebar .nav-link {
    color: var(--color4);
    font-weight: 500;
    padding: 0.8rem 1rem;
    border-radius: 8px; /* Standard radius */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

#sidebar .nav-link:hover, #sidebar .nav-link.active {
    background: var(--color2); /* Light green hover */
    color: var(--sage-deep); /* Deep green text */
    border-radius: 10px;
    transform: none; /* Removed sliding effect */
}

#content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.main-content {
    padding: 2rem;
}

/* Standard Cards (Replacing Glassmorphism) */
.glass-card {
    background: #ffffff;
    border: 1px solid var(--color5);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease;
}

.glass-card:hover {
    box-shadow: 0 8px 28px rgba(52, 71, 48, 0.12);
    transform: none; /* Removed floating */
}

/* Bootstrap Overrides */
.btn-primary {
    background-color: var(--color1);
    border-color: var(--color1);
    color: #ffffff;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--sage-deep) !important;
    border-color: var(--sage-deep) !important;
    color: #ffffff !important;
}

.form-control, .form-select {
    border: 1px solid #d1d3e2;
    border-radius: 6px;
    background: #ffffff;
    color: #6e707e;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color1);
    background: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(95, 125, 84, 0.25);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color3);
    vertical-align: middle;
}

.table th {
    color: #858796;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.80rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color5);
    background-color: #f8f9fc;
}

.table tbody tr {
    transition: background 0.2s;
    border-bottom: 1px solid #e3e6f0;
}

.table tbody tr:hover {
    background-color: #f8f9fc;
}

/* Modal Styling */
.modal-content {
    background: #ffffff;
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Fix modal height jumping on tab switch */
.modal-body .tab-content {
    min-height: 420px;
}

/* Info Box in Dashboard */
.info-box {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--color1); /* Red line */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        left: -280px;
        height: 100vh;
        z-index: 1040;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(0,0,0,0.5);
    }
    
    #sidebar.show {
        left: 0;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    /* Improve dashboard info box layout on mobile */
    .info-box {
        margin-bottom: 1rem;
    }

    /* Responsive Tables to Cards */
    .table thead {
        display: none; /* Hide column headers */
    }
    
    .table, .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }
    
    .table tr {
        margin-bottom: 1rem;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.05);
        padding: 0.5rem 0;
        background: #ffffff;
    }
    
    .table td {
        display: block;
        text-align: right;
        padding: 0.75rem 1rem 0.75rem 45%;
        position: relative;
        border-bottom: 1px solid #f8f9fc;
        border-top: none !important;
        min-height: 40px;
        word-wrap: break-word;
    }
    
    .table td:last-child {
        border-bottom: 0;
        text-align: center;
        padding: 1rem;
    }
    
    .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        top: 0.75rem;
        width: 40%;
        font-weight: 600;
        text-align: left;
        color: #858796;
        font-size: 0.85rem;
    }
    
    .table td:last-child::before {
        display: none;
    }
    
    /* Disable horizontal scroll completely since we are using cards */
    .table-responsive {
        overflow-x: visible !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* Scrollable Tabs on Mobile */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    .nav-tabs::-webkit-scrollbar {
        height: 4px;
    }
    
    .nav-tabs::-webkit-scrollbar-thumb {
        background-color: #d1d3e2;
        border-radius: 4px;
    }

    /* Mobile Typography Adjustments */
    .form-control, .form-select {
        font-size: 0.95rem;
        padding: 0.4rem 0.75rem;
    }
    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-body .tab-content {
        min-height: auto; /* Allow shrinking on mobile to save vertical space */
    }
}
.info-box h4 {
    color: var(--color4);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.info-box p {
    color: var(--color3);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Sidebar scrollability */
#sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#sidebar .nav {
    overflow-y: auto;
    flex: 1;
    flex-wrap: nowrap; /* Prevents mobile 2-column bug */
}
#sidebar .nav-item .fa-chevron-down {
    transition: transform 0.3s ease;
}
#sidebar .nav-link:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}
#sidebar .nav-link {
    margin-bottom: 0.15rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

/* Nav Tabs styling */
.nav-tabs .nav-link {
    color: var(--color4);
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--sage-deep);
    border-color: var(--color1);
    border-bottom-color: transparent;
    font-weight: 600;
}

/* Badges */
.badge.bg-primary { background-color: var(--color1) !important; }
.badge.bg-success { background-color: var(--good) !important; }
.badge.bg-warning { background-color: var(--warn) !important; }
.badge.bg-danger { background-color: var(--crit) !important; }

/* Status pills (spec §6) */
.st {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: inline-block;
}
.st.new, .st.active, .st.ok-green { background: #e4f1e4; color: var(--good); }
.st.ok, .st.info { background: #e0ecef; color: #3b7d8c; }
.st.wait, .st.pending { background: #f8efd9; color: var(--warn); }
.st.crit, .st.inactive, .st.passive { background: #f6e4e1; color: var(--crit); }

/* Password show/hide toggle (spec §6) */
.password-toggle-wrap { position: relative; }
.password-toggle-wrap .form-control { padding-right: 2.5rem; }
.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color4);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}
.password-toggle-btn:hover { color: var(--sage-deep); }

/* ===== DARK THEME ===== */
body.dark-theme {
    background-color: #1b241a;
    color: #e0e0e0;
}
body.dark-theme #sidebar {
    background: #202b1e;
    border-right-color: #2a3a28;
}
body.dark-theme #sidebar .nav-link {
    color: #8fa389;
}
body.dark-theme #sidebar .nav-link:hover,
body.dark-theme #sidebar .nav-link.active {
    background: rgba(95,125,84,0.18);
    color: #8fb583;
}
body.dark-theme #sidebar small {
    color: #556677 !important;
}
body.dark-theme .glass-card {
    background: #202b1e;
    border-color: #2a3a28;
    box-shadow: 0 0.15rem 1.75rem rgba(0,0,0,0.3);
}
body.dark-theme .table th {
    background-color: #1d2a1b;
    color: #8fa389;
    border-bottom-color: #2a3a28;
}
body.dark-theme .table tbody tr {
    border-bottom-color: #2a3a28;
}
body.dark-theme .table tbody tr:hover {
    background-color: #1d2a1b;
}
body.dark-theme .form-control,
body.dark-theme .form-select {
    background: #1d2a1b;
    border-color: #2a3a28;
    color: #ccd0d4;
}
body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    background: #202b1e;
    border-color: var(--color1);
    color: #e0e0e0;
}
body.dark-theme .modal-content {
    background: #202b1e;
    color: #e0e0e0;
}
body.dark-theme .modal-header {
    border-bottom-color: #2a3a28;
}
body.dark-theme .btn-close {
    filter: invert(1);
}
body.dark-theme .navbar {
    background: #202b1e !important;
    border-bottom-color: #2a3a28 !important;
}
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3,
body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
body.dark-theme .modal-title, body.dark-theme strong {
    color: #e8e8e8;
}
body.dark-theme .text-muted {
    color: #7788aa !important;
}
body.dark-theme .text-dark {
    color: #ccd0d4 !important;
}
body.dark-theme .info-box {
    background: #202b1e;
    box-shadow: 0 0.15rem 1.75rem rgba(0,0,0,0.3);
}
body.dark-theme .nav-tabs {
    border-bottom-color: #2a3a28;
}
body.dark-theme .nav-tabs .nav-link {
    color: #8fa389;
}
body.dark-theme .nav-tabs .nav-link.active {
    background: #202b1e;
    color: #8fb583;
    border-color: #2a3a28;
    border-bottom-color: #202b1e;
}
body.dark-theme .alert-danger {
    background: rgba(193,91,78,0.15);
    border-color: rgba(193,91,78,0.3);
    color: #e5978a;
}
body.dark-theme .alert-success {
    background: rgba(95,125,84,0.15);
    border-color: rgba(95,125,84,0.3);
    color: #8fb583;
}
@media (max-width: 768px) {
    body.dark-theme .table tr {
        background: #202b1e;
        border-color: #2a3a28;
    }
    body.dark-theme .table td {
        border-bottom-color: #25351f;
    }
    body.dark-theme .table td::before {
        color: #7d9078;
    }
}

/* =====================================================================
   YENİ KABUK — Referans "property dashboard" düzeni (ikon rayı + üst çubuk)
   ===================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
body { background: var(--bg-app); }
.shell { padding: 18px 24px 40px; max-width: 1600px; margin: 0 auto; }

/* Hamburger (mobilde görünür) + drawer overlay (varsayılan gizli) */
.hamburger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color5); background: #fff;
    color: var(--sage-deep); font-size: 18px; cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center; }
.rail-overlay { display: none; }

/* Üst çubuk */
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.topbrand { flex-shrink: 0; text-decoration: none; }
.topbrand img { height: 52px; width: auto; display: block; }
.pagehead h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; font-family: 'Montserrat', sans-serif; color: var(--color3); }
.pagehead p { color: var(--color4); font-size: 13px; margin: 2px 0 0; }
.topsearch { margin-left: auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--color5);
    border-radius: 999px; padding: 10px 18px; width: 300px; color: var(--color4); }
.topsearch i { font-size: 14px; }
.topsearch input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--color3); width: 100%; }
.topbtn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--color5); display: grid; place-items: center;
    color: var(--sage-deep); font-size: 16px; position: relative; cursor: pointer; text-decoration: none; transition: all .15s; flex-shrink: 0; }
.topbtn:hover { background: var(--color2); }
.topbtn .topdot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--crit); border: 2px solid #fff; }
.tenant-switcher { border: 1px solid var(--color5); border-radius: 999px; padding: 9px 16px; font-size: 13px; background: #fff; color: var(--color3); max-width: 220px; }
.tenant-switcher:focus { outline: 0; border-color: var(--color1); box-shadow: 0 0 0 3px rgba(95,125,84,.15); }

/* Gövde: ikon rayı + içerik */
.shell-body { display: flex; gap: 22px; align-items: flex-start; }
.shell-body .main-content { flex: 1; min-width: 0; padding: 0; }

/* İkon rayı */
.rail { width: 72px; flex-shrink: 0; background: #fff; border-radius: 22px; box-shadow: var(--shadow);
    padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: sticky; top: 18px; z-index: 1030; }
.rail-spacer { flex: 1; min-height: 20px; }
.rail-group { position: relative; }
.rail-item { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--color4);
    font-size: 18px; text-decoration: none; transition: all .15s; }
.rail-item:hover { background: var(--color2); color: var(--sage-deep); }
.rail-item.active { background: #2f3b2a; color: #fff; }
.rail-avatar { width: 42px; height: 42px; border-radius: 50%; background: #2f3b2a; color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 15px; margin-top: 4px; }

/* Rayın üzerine gelince açılan alt menü (flyout) */
.rail-flyout { position: absolute; left: 100%; top: -4px; margin-left: 12px; background: #fff; border: 1px solid var(--color5);
    border-radius: 14px; box-shadow: 0 12px 34px rgba(52,71,48,.16); padding: 8px; min-width: 210px;
    opacity: 0; visibility: hidden; transform: translateX(-6px); transition: all .16s ease; z-index: 1060; }
.rail-group:hover .rail-flyout { opacity: 1; visibility: visible; transform: translateX(0); }
.rail-flyout::before { content: ''; position: absolute; left: -12px; top: 0; width: 12px; height: 100%; }
.rail-flyout-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color4); padding: 6px 12px 8px; }
.rail-flyout a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--color3);
    text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.rail-flyout a i { width: 18px; text-align: center; color: var(--color4); }
.rail-flyout a:hover { background: var(--color2); color: var(--sage-deep); }
.rail-flyout a:hover i { color: var(--sage-deep); }
.rail-flyout a.active { background: var(--color2); color: var(--sage-deep); font-weight: 600; }
.rail-flyout a.active i { color: var(--sage-deep); }

/* Dark tema kabuk */
body.dark-theme .rail, body.dark-theme .topsearch, body.dark-theme .topbtn,
body.dark-theme .tenant-switcher, body.dark-theme .rail-flyout { background: #1e2a1c; border-color: #2a3a28; }
body.dark-theme .rail-item { color: #8fa588; }
body.dark-theme .rail-item:hover, body.dark-theme .rail-flyout a:hover { background: rgba(95,125,84,.2); color: #cfe0c6; }
body.dark-theme .rail-flyout a { color: #d6e0d0; }
body.dark-theme .pagehead h1 { color: #eef2ea; }

/* Responsive: mobilde hamburger drawer (yatay kaydırma YOK) */
@media (max-width: 992px) {
    .shell { padding: 10px 12px 30px; }
    .hamburger { display: inline-flex; }
    .topbar { gap: 10px; flex-wrap: wrap; }
    .topbrand img { height: 40px; }
    .pagehead h1 { font-size: 17px; }
    .pagehead p { display: none; }
    .topsearch { display: none; }
    .tenant-switcher { max-width: 150px; margin-left: auto; }

    .shell-body { display: block; }
    body.rail-open { overflow: hidden; }
    .rail-overlay { display: block; position: fixed; inset: 0; background: rgba(20,28,18,.45); z-index: 1190;
        opacity: 0; visibility: hidden; transition: opacity .2s; }
    .rail-overlay.open { opacity: 1; visibility: visible; }

    .rail { position: fixed; top: 0; left: -300px; bottom: 0; width: 272px; height: 100%; z-index: 1200;
        border-radius: 0 20px 20px 0; flex-direction: column; align-items: stretch; overflow-y: auto;
        padding: 16px 10px; gap: 2px; transition: left .26s ease; box-shadow: 0 0 40px rgba(0,0,0,.28); }
    .rail.open { left: 0; }
    .rail-spacer, .rail-avatar { display: none; }
    .rail-item { display: none; }
    .rail-group { width: 100%; }
    .rail-flyout { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
        border: 0; border-radius: 0; padding: 0; margin: 0 0 4px; min-width: 0; background: transparent; }
    .rail-flyout::before { display: none; }
    .rail-flyout-title { padding: 12px 12px 4px; }
    .rail-flyout a { padding: 12px; font-size: 14px; }
}