Fix mobile responsiveness across all pages

- PosPage: rooms list becomes horizontal scroll row on mobile instead of w-56 sidebar
- AvailabilityPage: edit panel stacks below grid on mobile (was fixed w-80 side panel)
- UsersPage roles tab: sidebar stacks above permissions on mobile
- All page containers: p-6 → p-4 md:p-6 (TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, DynamicPricingPage, GuestsPage, LoyaltyPage)
- Stats grids: lg:grid-cols-4 → md:grid-cols-4 (GuestsPage, TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, LoyaltyPage)
- Modal form grids: grid-cols-3 → grid-cols-1 sm:grid-cols-3, grid-cols-5 → grid-cols-3 sm:grid-cols-5, grid-cols-4 → grid-cols-2 sm:grid-cols-4
- PosPage modals: fixed w-80/w-96 → responsive w-[calc(100vw-2rem)] sm:w-80/96

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/TariffsPage.tsx

@@ -200,8 +200,8 @@ function TariffModal({
     >
       <div className="space-y-5">
         {/* Name + Code */}
-        <div className="grid grid-cols-3 gap-3">
-          <div className="col-span-2">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <div className="sm:col-span-2">
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
               Название тарифа *
             </label>
@@ -223,7 +223,7 @@ function TariffModal({
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
             Тип питания
           </label>
-          <div className="grid grid-cols-5 gap-2">
+          <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
             {mealPlans.map(mp => (
               <button
                 key={mp.id}
@@ -250,7 +250,7 @@ function TariffModal({
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
             Что включено
           </label>
-          <div className="grid grid-cols-4 gap-2">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
             {allInclusions.map(inc => {
               const active = form.inclusions.includes(inc.id)
               return (
@@ -278,7 +278,7 @@ function TariffModal({
         </div>
 
         {/* Price modifier + min nights + cancellation */}
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
               Надбавка / скидка к базовой цене
@@ -413,7 +413,7 @@ export function TariffsPage() {
   const inactiveTariffs = tariffs.filter(t => !t.isActive)
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
@@ -429,7 +429,7 @@ export function TariffsPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
         {[
           { label: 'Всего тарифов',  value: tariffs.length,         color: 'text-slate-900 dark:text-slate-100' },
           { label: 'Активных',       value: activeTariffs.length,   color: 'text-emerald-600 dark:text-emerald-400' },