/*
Theme Name: INAD Franchise Portal
Author: INAD Developer
Description: Custom, secure, blank theme for INAD Franchise ERP Dashboard.
Version: 1.0
*/

/* ========================================================
   1. MASTER VARIABLES (LIGHT & DARK THEME)
======================================================== */
:root {
    /* Base Font Size for Scalability */
    --font-base: 16px;

    /* Primary Colors */
    --primary: #0073aa;
    --primary-hover: #005177;
    
    /* Semantic Colors (Strictly ONE variation each) */
    --success: #28a745;
    --danger: #dc3545; /* The ONLY Red */
    --warning: #ffc107;
    --info: #17a2b8;
    --secondary: #6c757d;

    /* Backgrounds & Borders (Light Mode Default) */
    --bg-main: #f4f6f8;
    --bg-card: #ffffff;
    --bg-alt: #f9f9f9;
    --border-color: #dddddd;
    
    /* Text Colors */
    --text-main: #333333;
    --text-muted: #666666;
    --text-light: #ffffff;

    /* Shadows & Radius */
    --radius: 8px;
    --shadow: 0 4px 10px rgba(0,0,0,0.08);
    --shadow-hover: 0 6px 15px rgba(0,0,0,0.12);
    
    /* Update these in :root */
    --accent: #d35400;
    --accent-hover: #b84a00;

    /* Update these in [data-theme="dark"] */
    --accent: #e65c00;
    --accent-hover: #ff6600;
}

/* DARK MODE VARIABLES */
[data-theme="dark"] {
    --primary: #3399cc;
    --primary-hover: #5bb3e6;
    --bg-main: #121212;
    --bg-card: #1e1e1e;
    --bg-alt: #2a2a2a;
    --border-color: #333333;
    --text-main: #f1f1f1;
    --text-muted: #aaaaaa;
    --shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* ========================================================
   2. GLOBAL RESET & BASE STYLES
======================================================== */
* { box-sizing: border-box; }
html { font-size: var(--font-base); transition: font-size 0.3s ease; }
body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-main); color: var(--text-main); transition: background-color 0.3s, color 0.3s; }
a { color: var(--primary); text-decoration: none; transition: 0.3s; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }

/* Global Utilities */
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.bg-card { background-color: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Buttons Base */
.btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius); border: none; cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 1rem; text-align: center; }
.btn-primary { background: var(--primary); color: var(--text-light); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: var(--text-light); }
.btn-danger:hover { filter: brightness(0.9); }
.btn-success { background: var(--success); color: var(--text-light); }
.btn-success:hover { filter: brightness(0.9); }

/* YAHAN SE NICHE HUM PAGE-BY-PAGE CSS RAKHENGE */

/* --- 1. HEADER CSS --- */
.inad-global-header{background:var(--bg-card);box-shadow:var(--shadow);padding:15px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:999}
.inad-global-header .logo{font-size:1.5rem;font-weight:900;color:var(--primary);letter-spacing:1px}
.inad-global-header .logo span{color:var(--accent)}
.inad-global-header .nav-links{display:flex;gap:25px;align-items:center}
.inad-global-header .nav-links a{color:var(--text-main);font-weight:600;font-size:1rem}
.inad-global-header .nav-links a:hover{color:var(--primary)}
.inad-global-header .nav-links a.btn-apply{background:var(--accent);color:var(--text-light);padding:8px 22px;border-radius:25px;font-weight:bold;box-shadow:var(--shadow)}
.inad-global-header .nav-links a.btn-apply:hover{background:var(--accent-hover);transform:translateY(-1px)}
.ui-controls{display:flex;gap:5px;align-items:center;border-right:2px solid var(--border-color);padding-right:15px;margin-right:10px}
.font-resizer-btn{background:none;border:1px solid var(--border-color);cursor:pointer;padding:2px 6px;border-radius:var(--radius);color:var(--text-main);transition:0.3s}
.font-resizer-btn:hover{background:var(--bg-alt)}
.theme-toggle-btn{background:none;border:none;cursor:pointer;padding:5px;font-size:1rem;margin-left:10px;color:var(--text-main)}
@media (max-width:768px){.inad-global-header{flex-direction:column;padding:15px 20px;gap:15px}.inad-global-header .nav-links{flex-wrap:wrap;justify-content:center;gap:15px}.ui-controls{border-right:none;padding-right:0;margin-right:0;border-bottom:1px solid var(--border-color);padding-bottom:10px;width:100%;justify-content:center}}

/* --- 2. GLOBAL UTILITIES, ALERTS & ANIMATIONS --- */
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.mb-3{margin-bottom:20px}
.alert{padding:15px 20px;border-radius:var(--radius);margin-bottom:20px;font-weight:600;animation:fadeIn 0.5s ease;box-shadow:var(--shadow)}
.alert-success{background:var(--bg-alt);color:var(--success);border-left:4px solid var(--success)}
.alert-danger{background:var(--bg-alt);color:var(--danger);border-left:4px solid var(--danger)}
.alert-warning{background:var(--bg-alt);color:var(--warning);border-left:4px solid var(--warning)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}

/* --- BUTTON UPGRADES (Smooth Hover & Active States) --- */
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-secondary{background:var(--secondary);color:var(--text-light)}
.btn-secondary:hover{filter:brightness(0.9)}
.btn-block{width:100%;display:block}

/* --- 3. FORMS GLOBAL CSS --- */
.form-group{margin-bottom:20px}
.form-label{display:block;font-weight:600;margin-bottom:8px;color:var(--text-main)}
.form-control{width:100%;padding:12px 15px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-alt);color:var(--text-main);font-family:inherit;transition:all 0.3s ease;box-sizing:border-box;font-size:1rem}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0, 115, 170, 0.15);background:var(--bg-card)}
.inad-row{display:flex;gap:20px;flex-wrap:wrap}
.inad-col{flex:1;min-width:250px}

/* --- 4. APPLY PAGE SPECIFIC --- */
.apply-wrapper{max-width:800px;margin:50px auto;background:var(--bg-card);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform 0.3s ease,box-shadow 0.3s ease}
.apply-wrapper:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.section-title{border-bottom:2px solid var(--primary);padding-bottom:8px;margin-top:30px;margin-bottom:20px;color:var(--primary);font-size:1.25rem}
.img-preview-box{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.img-preview-item{position:relative;width:100px;height:100px;border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);animation:popIn 0.3s ease}
.img-preview-item img{width:100%;height:100%;object-fit:cover}
#preview-section{display:none;background:var(--bg-alt);padding:25px;border-radius:var(--radius);border:1px dashed var(--border-color);margin-bottom:20px;animation:fadeIn 0.4s ease}
.preview-data p{margin:8px 0;border-bottom:1px solid var(--border-color);padding-bottom:8px;color:var(--text-main)}
.preview-data p strong{color:var(--primary);display:inline-block;width:140px}

/* --- 5. PORTAL GLOBAL (DASHBOARDS) --- */
.portal-navbar{background:var(--primary);color:var(--text-light);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);position:sticky;top:0;z-index:99}
.portal-navbar h2{margin:0;font-size:1.25rem;color:var(--text-light)}
.portal-navbar-right{display:flex;align-items:center;gap:20px}
.portal-navbar .ui-controls button{color:var(--text-light);border-color:rgba(255,255,255,0.3)}
.portal-navbar .ui-controls button:hover{background:rgba(255,255,255,0.1)}
.logout-link{color:#ffcccc;text-decoration:none;font-weight:bold;transition:0.3s}
.logout-link:hover{color:#fff}
.portal-container{padding:20px;max-width:1200px;margin:0 auto}
.action-btn-row{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}

/* --- 6. WIDGETS & CARDS --- */
.widget-row{display:flex;gap:20px;flex-wrap:wrap}
.widget-card{flex:1;min-width:300px;background:var(--bg-card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform 0.3s,box-shadow 0.3s}
.widget-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.widget-card.border-success{border-top:4px solid var(--success)}
.widget-card.border-info{border-top:4px solid var(--info)}
.widget-card.border-warning{border-top:4px solid var(--warning)}
.widget-card.border-secondary{border-top:4px solid var(--secondary)}
.widget-title{margin-top:0;border-bottom:1px solid var(--border-color);padding-bottom:10px;color:var(--text-main);font-size:1.1rem}

/* --- 7. MODALS & POP-UPS --- */
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(3px);animation:fadeIn 0.3s ease}
.popup-content{background:var(--bg-card);padding:30px;border-radius:var(--radius);width:90%;max-width:400px;box-shadow:0 10px 25px rgba(0,0,0,0.5);animation:popIn 0.3s ease}
.popup-content h3{margin-top:0;color:var(--danger)}
.btn-warning{background:var(--warning);color:#333}
.btn-warning:hover{filter:brightness(0.9);color:#000}

/* --- 8. PROFILE PAGE & LIGHTBOX --- */
.profile-layout{display:flex;flex-wrap:wrap;gap:20px}
.profile-left{flex:2;min-width:300px}
.profile-right{flex:1;min-width:300px;display:flex;flex-direction:column;gap:20px}
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;font-size:0.95rem}
.data-grid p{margin:0;color:var(--text-main)}
.timeline-box{background:var(--bg-alt);padding:15px;border-radius:var(--radius);margin-top:20px;font-size:0.85rem;color:var(--text-muted);border:1px solid var(--border-color)}
.doc-img-thumb{width:100px;height:70px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border-color);cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;background:var(--bg-alt)}
.doc-img-thumb:hover{transform:scale(1.05);box-shadow:var(--shadow-hover)}
.lightbox-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;justify-content:center;align-items:center;backdrop-filter:blur(5px);animation:fadeIn 0.3s ease}
.lightbox-close{position:absolute;top:20px;right:40px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;transition:0.3s}
.lightbox-close:hover{color:var(--danger)}
.lightbox-img{max-width:90%;max-height:90%;border:4px solid var(--bg-card);border-radius:var(--radius);box-shadow:0 0 20px rgba(0,0,0,0.5);animation:popIn 0.3s ease}
.back-link{display:inline-block;background:var(--bg-alt);color:var(--text-main);padding:8px 15px;border-radius:var(--radius);font-weight:bold;margin-bottom:20px;border:1px solid var(--border-color)}
.back-link:hover{background:var(--border-color);color:var(--primary)}

/* --- 9. TABLES & DATA GRIDS --- */
.table-wrapper{overflow-x:auto;margin-top:15px}
.inad-table{width:100%;border-collapse:collapse;text-align:left;font-size:0.95rem;color:var(--text-main)}
.inad-table thead tr{background:var(--bg-alt)}
.inad-table th{padding:12px 15px;border-bottom:2px solid var(--border-color);font-weight:600;color:var(--text-main);transition:0.3s}
.inad-table th[onclick]{cursor:pointer}
.inad-table th[onclick]:hover{background:var(--border-color)}
.inad-table td{padding:15px;border-bottom:1px solid var(--border-color);vertical-align:middle}
.inad-table tbody tr{transition:background 0.3s ease}
.inad-table tbody tr:hover{background:var(--bg-alt)}

/* --- 10. BADGES & UTILITIES --- */
.badge{display:inline-block;padding:4px 10px;border-radius:4px;font-size:0.8rem;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px}
.badge-warning{background:rgba(255,193,7,0.2);color:#b38600}
.badge-success{background:rgba(40,167,69,0.2);color:var(--success)}
.badge-danger{background:rgba(220,53,69,0.2);color:var(--danger)}
[data-theme="dark"] .badge-warning{color:#ffc107}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.search-input{padding:10px 20px;width:300px;border:1px solid var(--border-color);border-radius:25px;background:var(--bg-card);color:var(--text-main);box-shadow:var(--shadow);transition:0.3s;outline:none}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,115,170,0.2)}
.btn-sm{padding:6px 12px;font-size:0.85rem}
.border-primary{border-left:4px solid var(--primary)}
.logo-thumb{height:45px;border-radius:var(--radius);border:1px solid var(--border-color);padding:2px;background:var(--bg-alt);box-shadow:var(--shadow)}

/* --- 11. LOGIN & AUTH PAGES --- */
.login-wrapper{max-width:400px;margin:100px auto;padding:40px 30px;animation:fadeIn 0.4s ease}
.login-header{text-align:center;margin-bottom:25px}
.login-header h2{color:var(--primary);margin:0 0 5px 0;font-size:1.75rem}
.login-header p{color:var(--text-muted);margin:0;font-size:0.95rem}
.btn-accent{background:var(--accent);color:var(--text-light)}
.btn-accent:hover{background:var(--accent-hover)}
.auth-link{font-size:0.85rem;color:var(--primary);text-decoration:none;font-weight:600;transition:0.3s}
.auth-link:hover{color:var(--primary-hover);text-decoration:underline}