/* =========================================================
Google Enterprise UI System (RTL + Tailwind Compatible)
Version: 3.0 Enterprise
Fully Token-Based, Optimized for Persian RTL
========================================================= */

/* =========================================================
FONT SYSTEM
========================================================= */
@font-face{
  font-family:"Vazir";
  src:url("../fonts/Vazir.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
DESIGN TOKENS
========================================================= */
:root{
  /* Primary colors */
  --g-primary:#1a73e8;
  --g-primary-hover:#1967d2;
  --g-primary-active:#185abc;
  --g-primary-light:#e8f0fe;

  /* Semantic colors */
  --g-success:#188038;
  --g-error:#d93025;
  --g-warning:#fbbc04;

  /* Text */
  --g-text-primary:#202124;
  --g-text-secondary:#5f6368;
  --g-text-disabled:#9aa0a6;
  --g-text-on-primary:#ffffff;

  /* Surface */
  --g-bg:#f1f3f4;
  --g-surface:#ffffff;
  --g-surface-hover:#f8f9fa;
  --g-surface-active:#eef3fd;

  /* Border */
  --g-border:#dadce0;
  --g-border-light:#e8eaed;
  --g-border-focus:#1a73e8;
  --g-border-error:#d93025;

  /* Shadow */
  --g-shadow-xs:0 1px 1px rgba(0,0,0,.04);
  --g-shadow-sm:0 1px 2px rgba(60,64,67,.12),0 1px 3px rgba(60,64,67,.08);
  --g-shadow-md:0 2px 6px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.1);
  --g-shadow-lg:0 4px 12px rgba(60,64,67,.18),0 2px 6px rgba(60,64,67,.12);
  --g-shadow-xl:0 8px 28px rgba(60,64,67,.22);

  /* Radius */
  --g-radius-xs:4px;
  --g-radius-sm:6px;
  --g-radius-md:8px;
  --g-radius-lg:12px;
  --g-radius-xl:16px;
  --g-radius-2xl:24px;
  --g-radius-full:9999px;

  /* Animation */
  --g-speed-fast:.12s;
  --g-speed:.18s;
  --g-speed-slow:.28s;
  --g-ease:cubic-bezier(.4,0,.2,1);
}

/* =========================================================
RESET & BASE
========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  font-family:"Vazir",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  direction:rtl;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--g-bg);
  color:var(--g-text-primary);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
TYPOGRAPHY
========================================================= */
.g-h1{font-size:28px;font-weight:500;}
.g-h2{font-size:24px;font-weight:500;}
.g-h3{font-size:20px;font-weight:500;}
.g-h4{font-size:16px;font-weight:500;}

.g-text-sm{font-size:12px;}
.g-text{font-size:14px;}
.g-text-lg{font-size:16px;}

.g-text-secondary{color:var(--g-text-secondary);}
.g-text-disabled{color:var(--g-text-disabled);}

/* =========================================================
GENERIC COMPONENTS (TAILWIND-FRIENDLY HELPERS)
========================================================= */

/* Inputs (used در دفتر تلفن و آمار) */
.input{
  @apply border border-gray-300 p-2 rounded w-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* Primary button */
.btn-primary{
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition text-sm font-medium inline-flex items-center justify-center;
}

/* Success button */
.btn-success{
  @apply bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition text-sm font-medium inline-flex items-center justify-center;
}

/* Alerts */
.alert-success{
  @apply bg-green-100 text-green-800 p-3 mb-4 rounded text-center text-sm;
}

.alert-error{
  @apply bg-red-100 text-red-800 p-3 mb-4 rounded text-center text-sm;
}

/* Table helpers */
.th{
  @apply p-2 text-sm font-medium text-gray-700 text-center;
}

.td{
  @apply p-2 text-sm text-gray-800 align-middle;
}

/* Summary cards (dashboard top metrics) */
.summary-card{
  transition:transform var(--g-speed) var(--g-ease),box-shadow var(--g-speed) var(--g-ease);
}
.summary-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--g-shadow-md);
}

.summary-title{
  @apply text-sm font-medium text-gray-600;
}

.summary-value{
  @apply text-2xl font-bold text-gray-900;
}

.summary-subtitle{
  @apply text-xs text-gray-500;
}

/* Chart cards (optional if بخواهی جدا کنی) */
.chart-card{
  @apply bg-white rounded shadow p-5;
}

.chart-title{
  @apply text-gray-700 font-medium mb-3;
}

.chart-body{
  @apply h-64;
}

/* =========================================================
CARD SYSTEM (GOOGLE-LIKE)
========================================================= */
.g-card{
  background:var(--g-surface);
  border-radius:var(--g-radius-lg);
  box-shadow:var(--g-shadow-sm);
  transition:box-shadow var(--g-speed) var(--g-ease),transform var(--g-speed) var(--g-ease);
}
.g-card-hover:hover{
  box-shadow:var(--g-shadow-lg);
  transform:translateY(-1px);
}
.g-card-flat{
  box-shadow:none;
  border:1px solid var(--g-border-light);
}
.g-card-body{
  padding:20px;
}
.g-card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--g-border-light);
}
.g-card-footer{
  padding:16px 20px;
  border-top:1px solid var(--g-border-light);
}

/* =========================================================
BUTTON SYSTEM (GOOGLE-LIKE)
========================================================= */
.g-btn{
  height:40px;
  padding:0 24px;
  border-radius:var(--g-radius-full);
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  transition:all var(--g-speed) var(--g-ease);
}

.g-btn-primary{
  background:var(--g-primary);
  color:var(--g-text-on-primary);
}
.g-btn-primary:hover{
  background:var(--g-primary-hover);
  box-shadow:var(--g-shadow-sm);
}
.g-btn-primary:active{
  background:var(--g-primary-active);
}

.g-btn-outline{
  background:transparent;
  border:1px solid var(--g-border);
  color:var(--g-text-primary);
}
.g-btn-outline:hover{
  background:var(--g-surface-hover);
}

.g-btn-text{
  background:transparent;
  color:var(--g-primary);
}
.g-btn-text:hover{
  background:var(--g-primary-light);
}

/* =========================================================
INPUTS (GOOGLE-LIKE FIELDS)
========================================================= */
.g-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.g-label{
  font-size:13px;
  color:var(--g-text-secondary);
}

.g-input{
  height:56px;
  padding:0 14px;
  border-radius:var(--g-radius-sm);
  border:1px solid var(--g-border);
  background:#fff;
  font-family:inherit;
  font-size:16px;
  transition:all var(--g-speed) var(--g-ease);
}
.g-input:hover{
  border-color:#c6c6c6;
}
.g-input:focus{
  outline:none;
  border-color:var(--g-border-focus);
  box-shadow:0 0 0 3px var(--g-primary-light);
}
.g-input-error{
  border-color:var(--g-border-error)!important;
}
.g-input-error:focus{
  box-shadow:none;
}

/* Google-like validation message */
.g-error{
  font-size:12px;
  color:var(--g-error);
  margin-top:2px;
  line-height:1.2;
  min-height:18px;
  transition:all 0.15s ease;
}

/* =========================================================
AUTH LAYOUT
========================================================= */
.g-auth{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6rem 1rem;
}

.g-auth-card{
  width:100%;
  max-width:450px;
  padding:48px;
  background:#fff;
  border-radius:var(--g-radius-2xl);
  box-shadow:var(--g-shadow-md);
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

/* =========================================================
FOOTER
========================================================= */
.g-footer{
  text-align:center;
  margin-top:2rem;
  color:var(--g-text-secondary);
  font-size:13px;
  line-height:1.5;
}
.g-footer a{
  color:var(--g-primary);
  text-decoration:none;
}
.g-footer a:hover{
  text-decoration:underline;
}

/* =========================================================
MAP / IRAN SVG
========================================================= */
#iran-map-wrapper svg{
  width:auto;      /* قبلاً 100% بود و باعث کشیدگی می‌شد */
  height:100%;
  display:block;
  user-select:none;
}

.province-label{
  fill:#222;
  text-anchor:middle;
  pointer-events:none;
  font-weight:bold;
}

/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:768px){
  .g-auth-card{
    padding:36px;
  }
}

@media(max-width:480px){
  .g-auth-card{
    border-radius:0;
    box-shadow:none;
    min-height:100vh;
  }
}